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


Posted in Javascript onFebruary 28, 2014
<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>
Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
广告切换效果(缓动切换)
May 27 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
九种原生js动画效果
Nov 11 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
vue小白入门教程
Apr 02 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
怎么判断js脚本加载完成
Feb 28 #Javascript
JS获取地址栏参数的几种方法小结
Feb 28 #Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 #Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 #Javascript
jQuery之选项卡的简单实现
Feb 28 #Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 #Javascript
flash遮住div问题的正确解决方法
Feb 27 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
解析Python中的二进制位运算符
2015/05/13 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python编写微信公众号首图思路详解
2019/12/13 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python控制台实现交互式环境执行
2020/06/09 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
python实现计算图形面积
2021/02/22 Python
美容师的职业规划书
2013/12/27 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
2015年护士节活动总结
2015/02/10 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang
python数字图像处理之图像的批量处理
2022/06/28 Python