js操作table

浏览数：30 / 时间：2015年06月09日

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>

  <style type="text/css">
        table
        {
            border-collapse: collapse;
            border: none;
            width: 200px;
        }
        td
        {
            border: solid #000 1px;
        }
    </style>

    <script>


      //获得当前域在的index ，(是第几个xxx)
      function getElementOrder(field,tableid){
        var inputs = document.getElementsByName(field.name);
        var len = inputs.length;
        var index = 0;
        for  (var i = 0 ; i < len; i++){
              if(inputs == field ){
                  index = i;
                  break;
              
              }
        
        }
        return index;

      }
  
   function insertRow(tableid,table_data){
   //获得tbody （创建一个table会有一个默认的 tbody 装载 tr td 这里获得tale一个tbody）
     var oTBODY     = document.getElementById(tableid).tBodies[0];//此处相当于item(0)在js中使用数组序号直接调用即可 见javascript权威指南P368
     var oTBODYData = document.getElementById(table_data).tBodies[0];
     
     var  len = oTBODYData.rows.length;

     //遍历data 行

     for ( var i = 0 ; i <= len; i++ ){
       oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
     }

   
   
   } 

   function deleteRow(Field,targetTable){
 
      var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的
 
       document.getElementById(targetTable).deleteRow(findex);
 
   }



    </script>


 </head>

 <body>
      <table id = "table_data" class="data"  style ="display:none">
          <tr>
            <td><input type="text" name="">1</td>
            <td><input type="text" name="2"></td>
             <td><input type="text"></td>
              <td><input type="button" value="删除" onclick="deleteRow(this,‘table_list‘);"></td>
          </tr>
          
      </table>
      
     <table id = "table_list" class ="list">
      <tr>
        <td>年龄 <td>
        <td>性别</td>
        <td><input type="button"  name ="del"  onclick="deleteRow(this)"></td>
        <td><input type="button"  value ="添加" name ="insert"  onclick="insertRow(‘table_list‘,‘table_data‘)"></td>
      </tr>
      </table>

 </body>
</html>