基于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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
了解重排与重绘
May 29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
php获取网页内容方法总结
2008/12/04 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php跨站攻击实例分析
2014/10/28 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python修改DBF文件指定列
2020/12/19 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
什么是封装
2013/03/26 面试题
招商专员岗位职责
2014/02/08 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android