(1)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>
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tab tr");
var len=$table.length;
// alert("tr length :"+len);
// 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>");
})
})
function deltr(index)
{
alert(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>
(2)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>
//在id为test的table的最后增加一行
function addtr(id){
tr_id = $("#"+id+">tbody>tr:last").attr("id");
alert(tr_id);
tr_id++;
//alert(tr_id);
str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";
$('#'+id).append(str);
}
//删除id为test的table的最后一行
function deltr(id){
tr_id = $("#"+id+">tbody>tr:last").attr("id");
$('#'+tr_id).remove();
}
</script>
</head>
<body>
<br/>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
<tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
<tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>
</table>
<input type="button" name="button" value="add" onclick="addtr('test');">
<input type="button" name="button" value="del" onclick="deltr('test');">
</div>
</body>
</html>
(3)javascript动态追加删除
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
function addMore()
{
var td = document.getElementById("more");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.type = "file";
input.name = "file";
button.type = "button";
button.value = "Remove";
button.onclick = function()
{
td.removeChild(br);
td.removeChild(input);
td.removeChild(button);
}
td.appendChild(br);
td.appendChild(input);
td.appendChild(button);
}
</script>
</head>
<body>
<form action="upload" theme="simple" enctype="multipart/form-data">
<table align="center" width="50%" border="1">
<tr>
<td>
file
</td>
<td id="more">
<input type = "file" name="file"/><input type="button" value="Add More.." onclick="addMore()">
</td>
</tr>
</table>
</form>
</body>
</html>
(4)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>
jQuery(function($){
//添加行
$("#add1").click(function(){
$("#table2>tbody").append('<tr><td>新增1</td><td><button onclick="deltr(this)">删除</button></td></tr>')
});
});
//删除行的函数，必须要放domready函数外面
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};
jQuery(function($){
//定义删除按钮事件绑定
//写里边，防止污染全局命名空间
function deltr(){
$(this).parents("tr").remove();
};
//已有删除按钮初始化绑定删除事件
$("#table2 .del").click(deltr);
//添加行
$("#add2").click(function(){
$('<tr><td>新增行2</td><td><button class="del">删除</button></td></tr>')
//在这里给删除按钮再次绑定事件。
.find(".del").click(deltr).end()
.appendTo($("#table2>tbody"));
});
});
jQuery(function($){
//第四个表格的删除按钮事件绑定
$("#table2").click(function(e) {
if (e.target.className=="del"){
$(e.target).parents("tr").remove();
};
});
//第四个表格的添加按钮事件绑定
$("#add3").click(function(){
$("#table2>tbody").append('<tr><td>新增行3</td><td><button class="del">删除</button></td></tr>')
});
});
</script>
</head>
<body>
<br/>
<table id="table2">
<tbody>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
</tbody>
</table>
<input type="button" name="add1" id="add1" value="新增1"/>
<input type="button" name="add2" id="add2" value="新增2"/>
<input type="button" name="add3" id="add3" value="新增3"/>
</body>
</html>
分享到：
。非常感谢！！
很不错，看了下、。。。
相关推荐
Jquery动态添加和删除行，配合ajax的使用 可以更完美的实现无刷新更新
在实际应用中，可能需要根据服务器返回的数据动态添加或删除行。这可以通过Ajax请求实现，使用`.ajax()`或`.get()`、`.post()`等方法获取数据，然后根据数据执行相应的DOM操作。 **5. 验证和反馈** 在执行添加和...
本文将深入探讨如何使用jQuery来实现表格中的添加和删除行功能，并结合附加数据进行操作。 首先，我们需要理解HTML表格的基本结构。在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<td>`表示单元格，而`...
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能，这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的...
// 为新标签添加删除事件 tagElement.click(function() { $(this).remove(); }); // 清空输入框 $('#tagName').val(''); } }); // 删除标签 $('#tagPanel').on('click', '.remove', function() { $(this...
本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中，`add()`函数...
JQuery对表格行的添加删除,如添加一行，删除一行
《jQuery表格编辑添加删除行插件详解》 在网页开发中，表格是一种常见的数据展示方式，而jQuery作为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动态添加删除移动列表插件通过结合HTML、CSS和JavaScript，提供了用户友好的交互体验，使得用户能够动态地管理列表中的数据。这个插件对于构建数据展示、任务管理或者任何需要动态操作列表的应用...
本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法，尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先，"jQuery动态添加删除编辑...
"jQuery添加删除标签插件"是基于这个强大的库开发的一个功能插件，专门用于实现标签功能的增强。这个插件旨在帮助开发者在网页应用中创建和管理用户友好的标签系统，使得用户能够方便地添加、删除和检查标签。 在...
总之，jQuery 提供了强大的工具来动态管理 HTML 表格，包括添加和删除行。通过理解 HTML 表格结构和 jQuery 的选择器、DOM 操作方法，开发者可以创建交互性强、功能丰富的网页应用。同时，利用现有的 jQuery 插件...
本篇文章将详细介绍两种jQuery实现动态添加删除行的方法。 ### 方法一：使用append()和remove() **添加行：** `append()`函数是jQuery中的一个方法，用于在元素末尾添加新的内容。在表格中添加新行，我们可以先...
本资源“jQuery添加删除表单元素代码.zip”提供了一种利用jQuery动态添加和删除表单行的解决方案，主要依赖于名为"jquery.dynamic-rows"的插件。这个插件是针对那些需要在用户交互时动态管理表单元素的应用场景设计...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
在这个"jQuery添加删除标签代码.zip"压缩包中，我们可以找到一个实现标签功能的实例，它包含了添加、删除、初始化、修改以及禁用和启用标签的各种操作。下面我们将详细探讨这些功能的实现及其相关知识点。 首先，...