<table id="tb" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>模板编号</td>
<td>模板名称</td>
</tr>
<tr>
<td>
<input type="text" name="ids" value=""/>
</td>
<td>
<input type="text" name="name" value=""/>
</td>
</tr>
</table>
<input type="button" onclick="addRow($('tb'));" value="增加一行"/>
<input type="button" onclick="deleteRow($('tb'));" value="删除一行"/>
<input type="button" onclick="deleteRows($('tb'));" value="删除选中行"/>
<script>
function $(elementId){
if (document.getElementById) {
return document.getElementById(elementId);
}else if(document.all) {
return document.all[elementId];
}else if(document.layers) {
return document.layers[elementId];
}
}
// 给表格增加一行,且与最后一行相同
function addRow(table)
{
// 获取表格中的最后一行对象TR
var sampleRow = table.rows[table.rows.length - 1];
// 获取表格中的最后一行对象TR中的所有TD对象集合,注意,获取的是一个含有多个TD对象的数组集合
var sampleCell = sampleRow.getElementsByTagName("td");
// 获取当前表格中的行数序号,为了给每行的每个TD中的对象命名
var row = table.rows.length;
// 新创建一个TR对象,也是将要增加到表格中的新行
var newRow = document.createElement("tr");
// 根据表格中最后一行sampleRow对象TR中的TD对象集合sampleCell,创建新行newRow中的TD对象集合newCell
// 遍历表格中的最后一行中TD对象集合,用来复制新增加的行中的每一个新的TD对象
for(i = 0; i < sampleCell.length; i ++ )
{
// 创建一个新的TD对象
var newCell = document.createElement("td");
// 将最后一行中第i列的TD对象的内码赋给新行中第i列的新TD对象中
newCell.innerHTML = sampleCell[i].innerHTML;
// 给新行中第i列TD对象中的对象赋名
newCell.childNodes.item(0).name = "cell" + row + i;
// 在新增加的行中追加一个新的TD子对象
newRow.appendChild(newCell);
}
// 将新行增加到表格最后一行的父对象中,TR的父对象是TBODY,很多时候会被遗忘的......
sampleRow.parentNode.appendChild(newRow);
}
// 删除表格中的最后一行
function deleteRow(table)
{
if(table.rows.length == 2)
window.alert("不允许删除最后一行数据!");
else
table.deleteRow(table.rows.length - 1);
}
// 删除表格中第一列选中的行
function deleteRows(table)
{
var i = table.rows.length - 1;
// 遍历表格中的所有行
while(i >= 1)
{
// 如果表格第1列中的选择框选中的话,就将该行删除
// 获取到表格的第i行 : table.rows[i]
// 获取第i行的第1个TD对象: table.rows[i].childNodes.item(0)
// 获取第i行的第1个TD对象中的第一个对象: table.rows[i].childNodes.item(0).childNodes.item(0)
// 获取第i行的第1个TD对象中的第一个对象的checked值:table.rows[i].childNodes.item(0).childNodes.item(0).checked
if(table.rows[i].childNodes.item(0).childNodes.item(0).checked == true)
{
if(i == 1)
window.alert("不允许删除最后一行数据!");
else
table.deleteRow(i);
}
i = i - 1;
}
}
</script>
分享到:
相关推荐
### 自动增加删除表格行代码(纯JS) 在网页开发中,动态地操作HTML元素是一项常见且实用的功能。本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能,以及如何为表格中的特定单元格添加当前日期。...
在JavaScript编程中,实现...通过以上步骤,我们可以实现一个功能完备的表格动态添加删除行的JS特效,同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用,比如数据录入、配置管理等场景。
标题“自动增加行的动态表格”揭示了这个项目的核心功能,即实现一个表格,当用户在其中输入数据或达到特定条件时,能够自动添加新的行。这种技术在数据输入、管理或者展示应用中非常常见,比如在线表单、数据库前端...
在JavaScript编程中,"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能,使得能够自动为带有特定前缀(例如"0X")的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...
js练习中,不过前面的数还不能自动排,是一个不错的例子,对学js初学者会有启示。
js 实现 表格按Enter键自动生成新行! 值得下载看看!资源免费,大家分享!!
5. **安全考虑**:虽然JS自动登录为用户提供便利,但也会增加安全风险。如果恶意代码能够访问到存储的登录信息,那么用户的账号可能被盗。因此,服务器端验证仍然是必要的,不能完全依赖客户端的自动登录功能。 6. ...
4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
本篇将详细探讨如何使用Ajax和jQuery实现表格数据的自动增加行功能。 首先,让我们了解Ajax的基础。Ajax是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过JavaScript发送异步HTTP请求到服务器,...
在JavaScript中实现图片自动旋转是一项常见的任务,尤其在动态展示或者动画效果中。这个功能的实现主要涉及到HTML、CSS和JavaScript三者的结合。下面将详细解释如何使用JavaScript来完成图片的自动旋转。 首先,...
博文中的“多个demo”可能包含了不同的场景和交互方式,比如通过按钮触发增加或删除行,或者根据用户输入自动添加行等。这些示例可以帮助开发者理解不同情况下的实现方法。 6. **事件监听**: JavaScript可以监听...
**迷宫游戏与JavaScript自动化求解** 在编程领域,迷宫游戏是一种常见的练习项目,它涉及到路径搜索算法、数据结构以及用户交互等多个方面。在这个基于JavaScript的迷宫游戏中,开发者在原有的基础上进行了优化,...
从给定的文件信息来看,该段代码主要实现了利用JavaScript(JS)进行图片的自动播放功能,这在网站设计和动态展示中非常常见。下面,我们将深入解析这段代码中的关键知识点,包括其工作原理、实现机制以及可能的优化...
### JavaScript自动跳转页面代码详解 #### 一、概述 在Web开发中,有时我们需要实现页面的自动跳转功能,比如在登录成功后自动跳转到首页,或者在完成某个操作后自动返回上一页等场景。本文将详细介绍一个简单的...
自动给html文件内的引用资源增加版本号,环境是python2.7, 可以直接编辑.py文件,在里面设置忽略的引用。 在html内部查找style 和js 引用,并在文件名称后面加上 ?v=23452(随机)
在本案例中,“js图片自动滚动”是一个使用JavaScript实现的网页功能,它能够让图片在网页上按照预设的方式自动滚动展示,提升用户体验,特别是在产品展示、新闻轮播等场景下尤为常见。 首先,我们要理解JavaScript...
`InputAutoFix.js`是核心的JavaScript脚本,它很可能包含了输入框自动匹配功能的主要逻辑。通常,这种功能会监听输入框的`input`或`keyup`事件,当用户键入字符时触发匹配过程。匹配算法可能包括字符串的模糊匹配、...
标签“自动隐藏的弹性返回顶部JS代码.rar”进一步强调了这个压缩包的内容,它是关于JavaScript代码,用于创建一个可自动隐藏且具有弹性的返回顶部按钮。 压缩包内的文件名称列表如下: 1. 一流素材网.html:这可能...