基于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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
vue接口请求加密实例
Aug 11 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
深入浅析php json 格式控制
2015/12/24 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
详解Python高阶函数
2020/08/15 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
电大本科自我鉴定
2014/02/05 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
护理专业自我评价
2015/03/11 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
公司职员入党自传书
2015/06/26 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
nginx日志格式分析和修改
2022/04/28 Servers