基于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十个最常用的自定义函数(中文版)
Sep 07 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
django使用xlwt导出excel文件实例代码
2018/02/06 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python生成任意频率正弦波方式
2020/02/25 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
什么是Rollback Segment
2013/04/22 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
老同学聚会感言
2014/02/23 职场文书
关爱留守儿童标语
2014/06/18 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
资料员岗位职责
2015/02/10 职场文书
Nginx的基本概念和原理
2022/03/21 Servers