基于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 密码强弱度检测万能插件
Feb 25 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
JS call()及apply()方法使用实例汇总
Jul 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
浅析使用Python操作文件
2017/07/31 Python
python中cPickle类使用方法详解
2018/08/27 Python
python从子线程中获得返回值的方法
2019/01/30 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Django单元测试工具test client使用详解
2019/08/02 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
小学教师管理制度
2014/01/18 职场文书
入学生会自荐书范文
2014/02/05 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
书香家庭事迹材料
2014/05/09 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
公司演讲稿开场白
2014/08/25 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年服务员工作总结
2015/04/08 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python