动态添加删除表格行的js脚本

<html>
<head>
<script language="javascript">
 //窗口表格增加一行
  function addNewRow(){
   var tabObj=document.getElementById("myTab");//获取添加数据的表格
   var rowsNum = tabObj.rows.length;  //获取当前行数
   var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
   var myNewRow = tabObj.insertRow(rowsNum);//插入新行
   var newTdObj1=myNewRow.insertCell(0);
   newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
   var newTdObj2=myNewRow.insertCell(1);
   newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
   var newTdObj3=myNewRow.insertCell(2);
   newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
   var newTdObj4=myNewRow.insertCell(3);
   newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
  }
//窗口表格删除一行
  function removeRow(){
   var chkObj=document.getElementsByName("chkArr");
   var tabObj=document.getElementById("myTab");
   for(var k=0;k<chkObj.length;k++){
    if(chkObj[k].checked){
     tabObj.deleteRow(k+1);
     k=-1;
    }
   }
  }
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="删除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
        <tr>
         <td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
        <td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
        <td class="top-bt liebiao-c" align="center" >节点名称</td>
        <td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
       </tr>
    </table>
</body>
</html>

时间： 2024-09-28 16:37:09

动态添加删除表格行的js脚本的相关文章

动态添加删除表格行的js实现代码

 本篇文章主要是对动态添加删除表格行的js实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <html> <head> <script language="javascript">   //窗口表格增加一行   function addNewRow(){    var tabObj=document.getElementById("myTab");//获取添加数据的表格    var rowsNum

动态添加删除表格行的js实现代码_javascript技巧

复制代码 代码如下: <html><head><script language="javascript">  //窗口表格增加一行  function addNewRow(){   var tabObj=document.getElementById("myTab");//获取添加数据的表格   var rowsNum = tabObj.rows.length;  //获取当前行数   var colsNum=tabObj.row

分享（动态添加/删除表格行并实现前后台互动）

问题描述 趁着周末的时候把以前做的一些东西重新拿出来编译整理了一下,放到这里和大家分享一下,一直在csdn上搜资料看博客,给了我很大的帮助,在这里也贡献一下自己的一点微薄之力.http://download.csdn.net/detail/jscznewbie/7653037这个地址下有完整的代码,基本上每行都有注释说明,并标有当时的一些想法,因为当时的水平有限,只有js和c#的一点基础,其他技术也都没有接触过,所以很多地方写的不成熟,但是麻雀虽小但五脏俱全,功能上是没有问题的,对于只有js和c

基于JavaScript实现动态添加删除表格的行_javascript技巧

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t

利用js动态添加删除table行的示例代码

 本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示:    代码如下: //动态添加行 function addRow(){    var table = document.getElementById("tableID");    var newRow = table.insertRow(); //创建新行    var newCell1 = newRow.insertCell(); //创建新单元格    

Js实现动态添加删除Table行示例_javascript技巧

最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

js dom动态添加删除表格数据的例子

学习了两天的 js dom 高级操作应用,实例代码基本上都听懂了,只是自己还没有能力全部敲出来,因为 js 操作 table 的代码太多了,js 对节点操作除了 div 之外,也可以更好的操作表单,这两天学到的是 js 如何进行对 table 的操作,当然也遇到了神奇的 js 增删改查,虽然没有用到数据库,但其效果蛮给力的,本来视频的代码想要一行一行敲下来,只是脑子里太乱了,只能从网上把视频上的代码给拷贝下来,仅供自己参考使用吧,这里的代码是关于 js 动态添加与删除表格数据的,感觉有点意思,回

javascript实现动态增加删除表格行(兼容IE/FF)_javascript技巧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>动态增删表格行</title> <script language="JavaScript"> <!-- //author: 

js中动态的添加删除表格行代码

第0行 第1行 删除本行 ... ... 第N行 插入一行