程序博客网 > 淘宝首页大图轮播代码

动态操作html table

来源：互联网 发布：淘宝首页大图轮播代码 编辑：程序博客网 时间：2024/05/05 17:06

1.动态操作表的一行:

<html>
<head>
   <title>动态操作表的行</title>
</head>
<body>
             <table border="0" width="681" bgcolor="#709EC0" cellSpacing=1
       cellPadding=3 id="DemoTable">
       <tr>
        <td width="35" bgcolor="#a4c2e8" align="center">
         <b>序号</b>
        </td>
        <td width="377" bgcolor="#a4c2e8" align="center">
         <b>内容</b>
        </td>
        <td clospan='2' width="143" bgcolor="#a4c2e8" align="center"
         colspan="2">
         <b>程度</b>
        </td>
        <td width="96" bgcolor="#a4c2e8" align="center">
         <b>选择</b>
        </td>

       </tr>
       <tr>
        <td bgcolor="#FFFFFF" width="35" align="center">
         1
        </td>
        <td bgcolor="#FFFFFF" width="377" align="center">
         <input name="neirong" type="text" size="50" style="float: left">
        </td>
        <td bgcolor="#FFFFFF" width="71" align="center">
         <input type="radio" name="chengdu1" value="重大">
         重大
        </td>
        <td bgcolor="#FFFFFF" width="65" align="center">
         <input type="radio" name="chengdu1" value="一般" checked>
         一般
        </td>
        <td bgcolor="#FFFFFF" width="96" align="center">
         <input type="checkbox" name="zhenggaizhuangtai">
        </td>
       </tr>
       <tr>
        <td bgcolor="#FFFFFF" width="35" align="center">
         2
        </td>
        <td bgcolor="#FFFFFF" width="377" align="center">
         <input name="neirong" type="text" size="50" style="float: left">
        </td>
        <td bgcolor="#FFFFFF" width="71" align="center">
         <input type="radio" name="chengdu2" value="重大">
         重大
        </td>
        <td bgcolor="#FFFFFF" width="65" align="center">
         <input type="radio" name="chengdu2" value="一般" checked>
         一般
        </td>
        <td bgcolor="#FFFFFF" width="96" align="center">
         <input type="checkbox" name="zhenggaizhuangtai" value="0">
        </td>
       </tr>
       <tr>
        <td bgcolor="#FFFFFF" width="35" align="center">
         3
        </td>
        <td bgcolor="#FFFFFF" width="377" align="center">
         <input name="neirong" type="text" size="50" style="float: left">
        </td>
        <td bgcolor="#FFFFFF" width="71" align="center">
         <input type="radio" name="chengdu3" value="重大">
         重大
        </td>
        <td bgcolor="#FFFFFF" width="65" align="center">
         <input type="radio" name="chengdu3" value="一般" checked>
         一般
        </td>
        <td bgcolor="#FFFFFF" width="96" align="center">
         <input type="checkbox" name="zhenggaizhuangtai">
        </td>
       </tr>
     </table>
       <div>
         <p>
        &nbsp;
        <a href="#" onclick="addRow();">继续添加</a>
        <a href="#" onclick="deleteObj();">删除</a>
       <div>
</body>
</html>
<script type="text/javascript">
           var index = 3;
            var tableObj = document.getElementById('DemoTable');   

           function addRow()
         {
          
         id=parseInt(index)+1;
            //增加行及属性
         var newTr = tableObj.insertRow();
         
         newTr.id = id;
         newTr.bgColor ="#FFFFFF";
         newTr.align="center";
         //增加列及属性
         var newTd0 = newTr.insertCell();
         var newTd1 = newTr.insertCell();
         var newTd2 = newTr.insertCell();
         var newTd3 = newTr.insertCell();
         var newTd4 = newTr.insertCell();
         
         newTd0.innerText = parseInt(index)+1;
         
               newTd1.innerHTML = "<input name='neirong' size='50' style='float: left'>";  
               newTd2.innerHTML = "<input type='radio'  name='"+id+"' value='重大' >          重大";     
               newTd3.innerHTML = "<input type='radio' name='"+id+"' value='一般' checked >          一般";
               newTd4.innerHTML = "<input type='checkbox' name='zhenggaizhuangtai"+id+"'>";  
                                             
               index++;
         }
         function deleteObj(){ 
           //如果到达表的最后一行，则不能删除
                 if(tableObj.rows.length==1){
                     alert("提示：已到表的最后一行，不能再删除！");
                     return false;
                    }
                  
            tableObj.deleteRow(-1);
            --index;
         }                
</script> 

 

2.遍历表中的每一个列的第一个物件

 function parse(){
          var tableObj = document.getElementById("demoTab");
             var hiddenStr = "";
           for(i=1;i<tableObj.rows.length;i++){
               var trs = tableObj.rows[i];
      //遍历每一行的每一列第一个物件
               for(j=1;j<trs.cells.length;j++){
       var td = trs.cells[j];
         if(td.childNodes[0].type=='text')          
         {
             .....
         }else if(td.childNodes[0].type=='radio'){             
             .....
         }else if(td.childNodes[0].type=='checkbox'){
             .....
         }
                             
      }
         hiddenStr +="...";
           }
         //将处理后的结果放入一个hidden域中
                     hiddenObj = document.createElement("<input type='hidden' name='hiddenStrVal'>");
                     hiddenObj.value=hiddenStr;
                     paichaInfo.appendChild(hiddenObj);
      }

淘宝首页大图轮播代码 淘宝首页大图轮播代码
原创粉丝点击
热门IT博客
魔兽世界7.0多核心优化魔兽世界7.0多核心优化
3钻淘宝店铺转类目3钻淘宝店铺转类目
des算法c语言讲解
javascript函数是对象
华傲数据 看准
mysql获取当前时间格式
姿态矩阵解算姿态角
建立餐饮销售网络
linux进程调度代码
什么是端口聚合
郑州大学软件学院官网
mac os x办公软件
mac安装openssl devel
ubuntu 14.04 lts iso
手机病毒制作软件
线路板软件 专业
手机屏幕滚动字幕软件
淘宝咋卖东西
java web项目建议
在淘宝上如何搜发票
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 青骄第二课登录 第二课堂 乱系列全集阅读全文目录 房天下 艳书网 御书宅阅读网 乔家大院暂停运营 篮坛之氪金无敌 笔画 为躲末日住地窖9年 中行分行被罚五千万 龙城 2019中文字字幕122页 历史 公务员 社保个人账户 个人所得税税率表 个人简历 时尚 流浪在诸天世界 创造与魔法 沈浪苏若雪 谈恋爱不如上清华 触不可及 总裁爹地惹不起 蚀骨危情 上海 思维导图 将军在上 他在沙发上疯狂要我 龙王大人在上 穹顶之上人间武库 男士发型 母丁香 万古第一龙 一部影院 新城礼美 黄 一道本道不卡免费高清 孤芳自赏杨小壮 成语大全

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里