利用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 相关文章推荐
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
js比较日期大小的方法
May 12 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
vuex 的简单使用
2018/03/22 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
如何在python中使用selenium的示例
2017/12/26 Python
TensorFlow实现创建分类器
2018/02/06 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2015入党自传书范文
2015/06/26 职场文书
创业计划书之水果店
2019/07/18 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server