编程 Javascript

利用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 21 Javascript

JQuery Ajax 跨域访问的解决方案

Mar 12 Javascript

javascript中input中readonly和disabled区别介绍

Oct 23 Javascript

基于JavaScript实现获取鼠标点击位置坐标的方法

Apr 12 Javascript

js用正则表达式来验证表单(比较齐全的资源)

Nov 17 Javascript

PassWord输入框代码分享

Jun 07 Javascript

浅谈js的html元素的父节点,子节点

Aug 06 Javascript

解决URL地址中的中文乱码问题的办法

Feb 10 Javascript

浅谈angular.copy() 深拷贝

Sep 14 Javascript

vue axios基于常见业务场景的二次封装的实现

Sep 21 Javascript

Vue CL3 配置路径别名详解

May 30 Javascript

nestjs中异常过滤器Exceptionfilter的具体使用

Feb 07 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