`

JS自动添加删除行

 
阅读更多
<script language="javascript">
function addRow()
{
    var root = document.getElementById("tbody")
    var allRows = root.getElementsByTagName('tr');
    var allCells = allRows[0].getElementsByTagName('td');
    var newRow = root.insertRow();
    var newCell0 = newRow.insertCell();
    var newCell1 = newRow.insertCell();
    newCell0.innerHTML = allCells[0].innerHTML;
    newCell1.innerHTML = allCells[1].innerHTML;
}
function removeRow(r)
{
   var root = r.parentNode;
   root.deleteRow(r);
}
</script>

<html>
<body>
<table>
<tr>
<td>
<input type="button" onclick="addRow()" name="Submit" value="添加">
</td>
</tr>
<tbody id="tbody">
<tr>
<td><input name="jcsj" type="text"/></td> 
<td><input type="button" value="删除" onclick="removeRow(this.parentNode.parentNode)"/></td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
| 无限扩展的年份select
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中，实现...通过以上步骤，我们可以实现一个功能完备的表格动态添加删除行的JS特效，同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用，比如数据录入、配置管理等场景。

    通过点击添加按钮即可自动添加一行点击删除即可自动删除一行

    同时，对于“自动删除行”，JavaScript同样监听“删除”按钮的点击事件，然后找到对应的行元素并从DOM（文档对象模型）中移除。 下面是一个简化的JavaScript示例，演示了如何实现这个功能： ```javascript // 获取...

    JS 添加删除行

    本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态添加、删除行以及对齐剩下的元素下标等功能。 #### 二、关键函数解析 ##### 1. `get_Element` 函数 该函数用于获取指定标签名的DOM元素...

    自动增加删除表格行代码（纯JS）

    ### 自动增加删除表格行代码（纯JS） 在网页开发中，动态地操作HTML元素是一项常见且实用的功能。本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能，以及如何为表格中的特定单元格添加当前日期。...

    纯javascript增加删除表格行

    3. **删除行**：删除表格行通常涉及到选择要删除的行，并调用`removeChild()`方法。例如，假设我们想删除点击时的当前行，可以这样实现： ```javascript function deleteRow(event) { if (confirm('确定要删除...

    简单的js添加删除行

    本例实现自动添加删除行的功能，功能简单了点，但是很好用希望对大家帮助

    ASP.NET—ASP.NET—006：GridView删除一行JS实现006：GridView增删除一行JS实现

    // 删除行 } else { alert('删除失败，请重试！'); } } }; xhr.send('id=' + row.id); // 传递要删除的行ID } ``` 这里，我们使用XMLHttpRequest对象发送异步请求到服务器的特定Action，该Action负责处理...

    js增加删除行html加javascript

    js练习中，不过前面的数还不能自动排,是一个不错的例子，对学js初学者会有启示。

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格，以及实现窗口居中显示的相关技术。 首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`&lt;table&gt;`元素定义，行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

    常用的js动态增加（删除）table数据行的功能

    它可能包含了表格结构，以及触发添加或删除行操作的按钮。 在实际应用中，你可能需要处理更多复杂情况，比如验证输入数据、处理用户选中的行、响应用户交互等。了解并熟练掌握这些基本操作后，你就能轻松应对各种...

    js文本超出字符自动删除

    "js文本超出字符自动删除"这一主题主要关注如何实现当用户在文本框中输入超过设定字符数时，系统能自动删除超出的字符，并且给出相应的提示。以下将详细讲解实现这个功能的方法和步骤。 首先，我们需要获取到文本框...

    js 自定义表格 支持调整列宽 排序 数据校验 添加/删除行 回车跳转 只适用IE

    5. **删除行**：与添加行相对，删除行功能允许用户移除不再需要的记录。通常，用户会选择一行然后点击“删除”按钮，或者选中多行进行批量删除。删除操作通常会有确认提示，以防误操作。 6. **回车跳转**：这是一种...

    表格动态追加、插入、删除行

    这些框架提供了数据驱动视图的能力，使得表格数据的变化能自动反映在界面上，简化了追加、插入和删除行的逻辑。 在实际开发中，工具库如jQuery DataTables或Handsontable提供了丰富的表格功能，包括排序、过滤、...

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

    js 删除动态创建的行

    在JavaScript编程中，动态创建和操作DOM元素是常见...以上代码展示了如何在JavaScript中动态创建和删除HTML表格行，并自动添加行号。这是一个基本的实现，实际应用中可能需要处理更多细节，比如错误检查、数据同步等。

    JS对表格的动态增加删除行 （多个demo）

    博文中的“多个demo”可能包含了不同的场景和交互方式，比如通过按钮触发增加或删除行，或者根据用户输入自动添加行等。这些示例可以帮助开发者理解不同情况下的实现方法。 6. **事件监听**： JavaScript可以监听...

    jquery实现table自动添加行和编辑

    本教程将深入探讨如何使用jQuery实现表格（table）的动态添加行和编辑功能，这对于构建数据驱动的Web应用至关重要。 首先，我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分（表头）和tbody...

    jsp-解决文件上传后重启Tomcat时文件自动删除问题.docx

    jsp解决文件上传后重启Tomcat时文件自动删除问题 本文主要介绍了jsp解决文件上传后重启Tomcat时文件自动删除问题，包括问题分析和详细解决方法。该问题是指在jsp项目中上传文件后，重启Tomcat服务器或清理缓存时，...

    jQuery 动态添加或删除表格行

    在实际应用中，我们可能需要在添加或删除行时执行一些额外的操作，比如计算总和、更新索引等。这时，可以结合使用`.each()`、`.index()`和`.data()`等jQuery方法。例如，当添加新行时，可以自动为每一列设置唯一ID，...

    table添加、删减行，单元格添加、修改、删除标记，对于指定标记默认生成显示，浮动定位且不会产生水平导航条

    综上所述，使用jQuery处理表格提供了丰富的交互可能性，可以轻松实现动态添加、删除行和单元格，以及根据特定标记进行操作。在实际应用中，还需要注意性能优化，避免大量DOM操作导致的性能下降。同时，合理的CSS布局...

Magicbox
Global site tag (gtag.js) - Google Analytics