基于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 相关文章推荐
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
在线增减.htpasswd内的用户
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
用JS实现选项卡
2020/03/23 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python程序控制NAO机器人行走
2019/04/29 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
个人委托书范本
2014/09/13 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
三八妇女节标语
2014/10/09 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
python使用torch随机初始化参数
2022/03/22 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Win11 BitLocker 驱动器加密
2022/04/19 数码科技