zoukankan      html  css  js  c++  java
  • JS 动态操作表格

    http://blog.csdn.net/long_carol/article/details/7356897

    //动态添加行与列
    
    function addHtml( )
    
            {
        var tab=document.getElementById("viewTabs"); //获得表格
        var colsNum=tab.rows.item(0).cells.length;   //表格的列数
    
         var num=document.getElementById("viewTabs").rows.length;//表格当前的行数
    
         var rownum=num-1;
          tab.insertRow(rownum);
            for(var i=0;i<colsNum-1; i++)
           {
              
               tab.rows[rownum].insertCell(i);//插入列
               tab.rows[rownum].cells[i].innerHTML="dfd";
             
           }
         tab.rows[rownum].insertCell(i);
                tab.rows[rownum].cells[i].innerHTML="ddddkk";
    }
    
     //动态删除表格的行
    
    function deleterow()
    {
     
    var lowNum;
     var num=document.getElementById("viewTabs").rows.length;
     alert(num);
     if(num==2)
     {
      lowNum=num-1;
     }
       var tb=document.getElementById("viewTabs");
      tb.deleteRow(lowNum);
    }
    
    //创建表格的行与列
    
    <script type="text/JavaScript"> function add_table(){var table = document.createElement("table");var tbody = document.createElement("tbody");var tr = document.createElement("tr");var td = document.createElement("td");var content = document.createTextNode("我是个表格.");td.appendChild(content);tr.appendChild(td);tbody.appendChild(tr);table.appendChild(tbody);document.body.appendChild(table);}</script></head><body onload="add_table();"></body></html>
    //删除当前行
    
    在当前的列中写一个事件:如 <input  type="text" id="btnCans" onclick="delRow(this)"/>
    
    function delRow(obj)
    {
     var Row=obj.parentNode;
     var Row=obj.parentNode; //tr
     while(Row.tagName.toLowerCase()!="tr")
     {
      Row=Row.parentNode;
     }
     Row.parentNode.removeChild(Row); //删除行
    
    
    }
    

      

    方法2 

    http://www.cnblogs.com/wequst/archive/2010/02/02/1661709.html

    inserRow()和insertCell()方法
    
    首先,表格行索引从0开始。
    
     
    
    inserRow():
     这个函数将新行添加到index的那一行前,
    
    比如insertRow(0),是将新行添加到第一行之前。
    
    默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。
    
    objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。
    
    insertCell()和insertRow()的用法相同,这里就不再说了。
    
     
    
    deleteRow()和deleteCell()方法
     deleteRow(index):index从0开始
    
    删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
    
     
    
    var row=document.getElementById("行的Id");
    var index=row.rowIndex; //有这个属性,嘿嘿
    objTable.deleteRow(index);
    注意:
    
    删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的
    
    错误JS代码:
    
    复制代码
    function clearRow()
    {
      objTable= document.getElementById("myTable");
      var length = objTable.rows.length
      for( var i=1; i<length ; i++ )
      {
         tblObj.deleteRow(i); 
         //应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半
      }
    }
    复制代码
    

      

  • 相关阅读:
    Working with macro signatures
    Reset and Clear Recent Items and Frequent Places in Windows 10
    git分支演示
    The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.
    Build website project by roslyn through devenv.com
    Configure environment variables for different tools in jenkins
    NUnit Console Command Line
    Code Coverage and Unit Test in SonarQube
    头脑王者 物理化学生物
    头脑王者 常识,饮食
  • 原文地址:https://www.cnblogs.com/lhlong/p/5643913.html
Copyright © 2011-2022 走看看