动态添加删除表格行的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语句中的CDATA标签的意义
May 09 Javascript
JS定时关闭窗口的实例
May 22 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue实现单选和多选功能
Aug 11 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
基于Cesium绘制抛物弧线
Nov 18 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设计模式之观察者模式的应用详解
2013/05/21 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python版飞机大战代码分享
2018/11/20 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
应届生法律求职信
2013/10/22 职场文书
创先争优制度
2014/01/21 职场文书
暑假家长评语大全
2014/04/17 职场文书
运动会演讲稿100字
2014/08/25 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
为Java项目添加Redis缓存的方法
2021/05/18 Redis