利用js动态添加删除table行的示例代码


Posted in Javascript onDecember 16, 2013

如下所示:

//动态添加行
function addRow(){
   var table = document.getElementById("tableID");
   var newRow = table.insertRow(); //创建新行
   var newCell1 = newRow.insertCell(); //创建新单元格
   newCell.innerHTML = ""; //单元格内的内容
   newCell.setAttribute("align","center"); //设置位置
}
//动态删除行
function deleteRow(){
   var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}
<html>
<head>
<title></title>
</head>
<body>
<table id="testTbl" border=1>
<tr>
<td>
产品名称
</td>
<td>
产品数量
</td>
<td>
产品单价
</td>
</tr>
<tr>
<td>
<select name="a">
   <option value="电子">电子</option>
   <option value="电器">电器</option>
</select></td>
<td>
    <input type="text" name="b">
     </td>
<td>
    <input type="text" name="c">
     </td>
</td>
</table>
<input type="button" name="Submit2" value="添加" onclick="addRow()">
<script>
function addRow(){
//添加行
var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性
newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = document.all("b").value;
newTd2.innerText = document.all("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';
}
function del(o)
{
var   t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>
Javascript 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
Ajax基础知识详解
Feb 17 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 #Javascript
JS冒泡事件的快速解决方法
Dec 16 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python函数嵌套实例
2014/09/23 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
django-初始配置(纯手写)详解
2019/07/30 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python pillow模块使用方法详解
2019/08/30 Python
python处理document文档保留原样式
2019/09/23 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python 实现的车牌识别项目
2021/01/25 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
仓管岗位职责范本
2014/02/08 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
实践单位评语
2014/04/26 职场文书
生产操作工岗位职责
2014/09/16 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android