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总是在变小,删除的行数总是会比预想的要少一半
      }
    }
    复制代码
    

      

  • 相关阅读:
    vscode 全局安装和配置 stylelint 像 webstorm 等 ide 一样来检查项目
    vscode 和 atom 全局安装和配置 eslint 像 webstorm 等 ide 一样使用 standard标准 来检查项目
    visual studio code (vscode)像 sublime text 的 ctrl+d 一样多光标选中
    intellij idea pycharm phpstorm webstorm 使用 FiraCode 作为编程字体,更新后字符乱码问题解决
    cmder 使用 linux bash 管道符 | grep 来筛选文件
    intellij idea pycharm phpstorm webstorm 这些编辑器像 sublime text 一样使用 ctrl d 来操作光标多选。
    前端开发中js变量定义及命名的规范建议
    论JavaWeb前后端分离放弃jsp
    ORACLE client 11g r2 客户端开发环境配置
    Javascript中document.execCommand()的用法
  • 原文地址:https://www.cnblogs.com/lhlong/p/5643913.html
Copyright © 2011-2022 走看看