利用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面向对象之二 命名空间
Feb 08 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 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
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP多个版本的分析解释
2011/07/21 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
八大排序算法的Python实现
2021/01/28 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
读群众路线心得体会
2014/03/07 职场文书
总经理助理的职责
2014/03/14 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书