动态添加删除表格行的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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
深入PHP FTP类的详解
2013/06/13 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
取得父标签
2006/11/14 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
js日历功能对象
2012/01/12 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
PHP PDO操作总结
2014/11/17 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Python实现购物程序思路及代码
2017/07/24 Python
python实现俄罗斯方块游戏
2020/03/25 Python
详解python Todo清单实战
2018/11/01 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python中的流程控制详解
2021/02/18 Python
大学生全国两会报告感想
2014/03/17 职场文书
教师考核评语
2014/04/28 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
求职自我推荐信
2015/03/24 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Go语言入门exec的基本使用
2022/05/20 Golang