http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html#
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行，很多情况下我们都是在页面来设置一个隐藏域的值，然后在js方法里动态的++或--，在学习jQuery的过程中，我试着用简单的方法来模拟实现这一个过程：效果图如下
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
// add method
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tab tr");
var len=$table.length;
// alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
})
})
// delete method
function deltr(index)
{
// alert("tr[id=\'"+index+"\']");
$table=$("#tab tr");
if(index>$table.length)
return;
else
{
$("tr[id=\'"+index+"\']").remove();
//$("tr:gt('"+index+"')").each
for(var temp=index+1;temp<=$table.length;temp++)
{
// $("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
$("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
}
}
}
</script>
</head>
<body>
<br/>
<table id="tab" border="1" width="60%" align="center">
<tr>
<td width="20%" align="center">序号</td>
<td align="center">标题</td>
<td align="center">操作</td>
</tr>
</table>
<br/>
<div style="border:2px; border-color:#00CC00; margin-left:20%">
<input type="button" id="but" value="add"/>
</div>
</body>
</html>
分析：
序号 head
标题
操作
1 <tr id="2">
jQuery1
删除 deltr(2)
2 <tr id="3">
jQuery2
删除 deltr(2)
3 <tr id="4">
jQuery3
删除 deltr(2)
分享到：
相关推荐
总结起来，实现动态添加/删除表格行并提交内容到后台的过程涉及前端JavaScript的事件监听、DOM操作以及AJAX请求，后端C#的HTTP请求处理和数据库操作。这种功能在实际项目中非常常见，对于初学者来说，理解并掌握这些...
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现...目前实现动态增加 删除最后一行与最后一列，获取表格内填写的input数据(最简洁的代码实现)
以上就是一个简单的原生JavaScript可编辑表格实现动态添加和删除行的示例。在实际应用中，可能还需要处理更多细节，如数据验证、表格排序和过滤等。记住，JavaScript是一种强大的工具，能够帮助我们实现丰富的交互式...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> ...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
此外，还可以扩展这个功能，比如添加验证、编辑和删除行的功能，或者使用AJAX从服务器获取数据并动态插入。这需要更深入地理解DOM操作和JavaScript事件处理。 总结来说，"表格动态插入行"是JavaScript在网页开发中...
本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**：DOM 是一种标准，用于表示 HTML 和 XML 文档的结构。它定义了...
动态操作这些元素是实现动态添加和删除表格的关键。 1. **动态添加表格行** 要动态添加表格行，首先需要获取到表格对象，通常是通过`document.getElementById`或`document.querySelector`来定位`<table>`元素。...
在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
删除操作可以使用`table.remove()`方法，通过传入表格ID和行数据的主键来移除特定行。例如： ```javascript // 删除按钮点击事件 $('#deleteBtn').on('click', function(){ var dataId = $(this).attr('data-id');...
在"jQuery 动态删除、添加表格demo"中，我们将探讨如何利用jQuery实现动态地在网页上添加和删除表格行，这对于创建交互性强的数据展示界面非常有用。 首先，我们需要了解jQuery的选择器机制。jQuery允许我们通过CSS...
"js动态添加和删除行"这个主题就是关于如何利用JavaScript在HTML表格（`<table>`）中实现动态添加和移除行的功能。这种功能在数据展示、用户输入等场景下非常常见，比如在线表格编辑器、数据库数据查看等。 动态...
这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容，但我们可以根据这个主题进行深入的讨论。 首先，我们要理解表格（Table）在HTML中的基本结构。...
总结来说，DHTML使得前端开发人员能够实现动态的表格操作，而无需频繁地向服务器发送请求。了解和掌握这些技术对于构建高效、用户友好的Web应用至关重要。通过实际操作和实践，你可以进一步熟悉这些概念，并将它们...
首先，我们从标题"jQuery表格增加删除代码.zip"可以推断，这个压缩包包含的是一个使用jQuery实现的表格动态操作的示例。这种功能通常用于用户需要动态添加或删除表格行的场景，比如在线表单填写、数据管理界面等。 ...
本文将深入探讨“jQuery表格编辑添加删除行插件”，帮助开发者更好地理解和应用这个工具。 首先，我们要理解jQuery的核心价值在于它简化了DOM操作，使得JavaScript代码更加简洁和高效。在这款插件中，我们可以通过...
它允许你添加、删除和修改列表项，非常适合构建简单的列表应用。你可以使用`addItem()`方法添加新的列表项，`takeItem()`或`clear()`方法来移除项，以及`setCurrentItem()`来改变选中的项。 2. **动态增删功能**：...
总的来说，"jQuery表格编辑添加删除行代码"提供了一套完整的解决方案，让开发者能够在网页或应用中轻松实现动态表格功能。通过结合HTML、CSS和JavaScript，特别是jQuery的强大功能，可以实现高度交互的表格，同时...