动态添加删除表格行的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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Vue异步加载about组件
Oct 31 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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支持页面回退的两种方法
2008/01/10 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python求最大值最小值方法总结
2019/06/25 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
调研座谈会发言材料
2014/08/23 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
致运动员的广播稿
2015/08/19 职场文书
python实现简单倒计时功能
2021/04/21 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
Python如何加载模型并查看网络
2022/07/15 Python