基于JavaScript实现动态添加删除表格的行


Posted in Javascript onFebruary 01, 2016

又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。

1.jsp

<table id="viewTabs">
<thead>
<tr>
<th>产品名称</th>
<th>编号</th>
<th>数量</th>
<th>重量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="productName" type="text"></td>
<td><input name="productNumber" type="text"></td>
<td><input name="quantity" type="text"></td>
<td><input name="weight" type="text"></td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" onclick="addTable();" style="margin-left: 750px;">添加行</button>

2.js

//添加行
function addTable(){
var tab=document.getElementById("viewTabs"); //获得表格
var colsNum=tab.rows.item(0).cells.length; //表格的列数
//表格当前的行数 
var num=document.getElementById("viewTabs").rows.length;
var rownum=num;
tab.insertRow(rownum);
for(var i=0;i<4; i++)
{
tab.rows[rownum].insertCell(i);//插入列
if(i==0){
tab.rows[rownum].cells[i].innerHTML=
'<input name="productName" type="text"/>';
}else if(i==1){
tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>';
}else if(i==2){
tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>';
}else{
tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>';
}
}
tab.rows[rownum].insertCell(i);
tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">删除行</a>';
}
//删除行
function delRow(obj)
{
var Row=obj.parentNode;
var Row=obj.parentNode; //tr
while(Row.tagName.toLowerCase()!="tr")
{
Row=Row.parentNode;
}
Row.parentNode.removeChild(Row); //删除行
}

以上所述是小编给大家分享的JavaScript实现动态添加删除表格的行,希望对大家有所帮助。

Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 #Javascript
jQuery 3.0 的变化及使用方法
Feb 01 #Javascript
jQuery与Ajax以及序列化
Feb 01 #Javascript
js格式化输入框内金额、银行卡号
Feb 01 #Javascript
You might like
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
vue实现搜索功能
2019/05/28 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
详解Django配置优化方法
2019/11/18 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
2014年物流工作总结
2014/11/25 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
单位同意报考证明
2015/06/17 职场文书
HAM-2000摩机图
2021/04/22 无线电
解决Python字典查找报Keyerror的问题
2021/05/26 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers