[JS]动态添加删除ROW
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script>
var count=3;
function CheckAll(sender)
{
var _array = document.getElementsByTagName("input");
for (var i=0;i<_array.length;i++)
{
var e = _array[i];
if (e.type == "checkbox")
{
if(e.id != "chkAll")
{
e.checked = sender.checked;
}
}
}
}
function AddRow(obj)
{
count++;
//添加一行
var newTr = testTbl.insertRow();
newTr.setAttribute("id","tr" + count.toString());
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box'+ count.toString() +'">';
newTd1.innerText= '第'+ count.toString() +'行';
}
function DelRow()
{
var tb = document.getElementById("testTbl");
if(tb.hasChildNodes)
{
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild)
{
if(confirm("确认删除" + lastchild.childNodes[1].childNodes[0].nodeValue + "?"))
{
var removednode = lastchild.parentNode.removeChild(lastchild);
//alert(removednode.childNodes[1].childNodes[0].nodeValue);
return true;
}
else
{
return false;
}
}
}
}
function ShowCheckboxID()
{
var message = "";
var _array = document.getElementsByTagName("input");
for (var i=0;i<_array.length;i++)
{
var e = _array[i];
if (e.type == "checkbox")
{
//alert(e.id);
message += e.id + ",";
}
}
if(message.length > 0)
{
message = message.substr(0,message.length-1);
}
alert(message);
}
function ShowTRID()
{
var tb = document.getElementById("testTbl");
if(tb.hasChildNodes)
{
var message = "";
var array_tr = tb.childNodes[0].childNodes;
for(var i=0;i< array_tr.length;i++)
{
if(i==0)
{
message += array_tr[i].id;
}
else
{
message += ","+array_tr[i].id;
}
//alert(array_tr[i].id);
}
alert(message);
}
}
function SplitStr()
{
var str = document.getElementById("txt1").value;
var _array = str.split(",");
var result = "";
for(var i=0;i<_array.length;i++)
{
result += _array[i] +"\r\n";
}
if(result.length > 0)
{
result = result.substr(0,result.length-2);
}
alert(result);
}
</script>
<body>
<table id="testTbl" style="border: solid 1px #D2D2D2">
<tr id="tr0">
<td><input type=checkbox id="chkAll" onclick="CheckAll(this);"></td>
<td>全选</td>
</tr>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td>第1行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td>第2行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第3行</td>
</tr>
</table>
<br />
<input type="button" id="btnAdd" onclick="AddRow();" value="Add Row" />
<input type="button" id="btnDel" onclick="DelRow();" value="Del Row" />
<input type="button" id="btnShowCheckboxID" onclick="ShowCheckboxID();" value="Show Checkbox ID" />
<input type="button" id="btnShowTRID" onclick="ShowTRID();" value="Show TR ID" />
<hr size="1" />
<input type="text" id="txt1" value="She,sells,seashells,by,the,seashore" size="50" style="cursor:pointer" />
<input type="button" id="btnSplit" onclick="SplitStr();" value="split string" />
</body>
</html>
==============================
删除表格行：
<script>function deleteRow (tableID, rowIndex) {
var table =document.all[tableID].deleteRow(rowIndex);
}
</script>
<table id=mxh border=1>
<tr><td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td></tr>
<tr><td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td></tr>
<tr><td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td></tr>
<tr><td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td></tr>
</table>
分享到：
相关推荐
js动态添加 删除行
<title>JS 动态添加删除行 姓名 年龄 <!-- 动态添加的数据行将放在这里 --> ()">添加行 ()">删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中，经常会遇到需要动态操作表格元素的情况，比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态...
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:
同样，你可以根据需求修改这个示例，比如添加删除行的功能，或者改变单元格的内容和行为。理解这些基本原理后，就能灵活应对各种复杂的交互需求了。在实际项目中，你可能会遇到性能优化、兼容性处理、错误处理等问题...
在JavaScript编程中，实现...通过以上步骤，我们可以实现一个功能完备的表格动态添加删除行的JS特效，同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用，比如数据录入、配置管理等场景。
总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> 添加行 ...
js 操作表格动态添加和删除行
在JavaScript和jQuery的世界里，动态地添加和删除DOM元素是常见的需求，特别是在处理表格数据时。本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常...
利用javascript来结合html，可以动态的添加一行数据，和根据索引来删除一行数据。
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
以下是关于"js动态添加行"的详细解释： 1. **理解DOM**: DOM是HTML或XML文档的结构化表示，它将网页内容转化为一个树状结构，使得我们可以用编程方式访问和修改页面元素。在JavaScript中，`document`对象提供了与...
JavaScript 动态添加或删除表格行 标题解释:JS 删除或者添加一行的代码，可以直接测试。 描述解释：该代码提供了 JavaScript 实现动态添加或删除表格行的功能，可以直接测试和应用。 标签解释：删除添加一行，指...
js table添加、删除行。点“添加”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行。