脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js删除表格行

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

 更新时间：2014年02月28日 09:43:25   作者：  
本篇文章主要是对动态添加删除表格行的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>
您可能感兴趣的文章:

相关文章

  • 探讨跨域请求资源的几种方式（总结）

    探讨跨域请求资源的几种方式（总结）

    这篇文章主要介绍了探讨跨域请求资源的几种方式（总结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • JS小游戏之仙剑翻牌源码详解

    JS小游戏之仙剑翻牌源码详解

    这篇文章主要介绍了JS小游戏之仙剑翻牌源码,是一款比较经典的卡牌类游戏,对于javascript游戏设计有不错的借鉴价值,需要的朋友可以参考下
    2014-09-09
  • js实现简单扫雷

    js实现简单扫雷

    这篇文章主要为大家详细介绍了js实现简单扫雷，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Vue项目中关于全局css的处理

    Vue项目中关于全局css的处理

    我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下
    2023-04-04
  • 基于D3.js实现时钟效果

    基于D3.js实现时钟效果

    这篇文章主要为大家详细介绍了基于D3.js实现时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 全面解析Bootstrap图片轮播效果

    全面解析Bootstrap图片轮播效果

    这篇文章主要介绍了全面解析Bootstrap图片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript Sort 表格排序

    JavaScript Sort 表格排序

    JavaScript表格排序实现代码，需要的朋友可以参考下。
    2009-10-10
  • Javascript 浏览器事件小结

    Javascript 浏览器事件小结

    Javascript中的事件都是与对象相关联的，而不是语言本身所有，当Javascript在浏览器中运行的时候，事件与每个浏览器实现的DOM模型有关。
    2010-02-02
  • 用JavaScript事件串连执行多个处理过程的方法

    用JavaScript事件串连执行多个处理过程的方法

    用JavaScript事件串连执行多个处理过程的方法...
    2007-03-03
  • js前端日历控件（悬浮、拖拽、自由变形）

    js前端日历控件（悬浮、拖拽、自由变形）

    这篇文章主要为大家详细介绍了js前端日历控件，可根据日期自定义日历上某日的颜色，另外可以悬浮，拖拽，自由变形
    2017-03-03

最新评论