jquery：添加和移除table一行数据

最新推荐文章于 2021-09-29 13:44:30 发布

原创最新推荐文章于 2021-09-29 13:44:30 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

本文介绍如何使用jQuery脚本动态地为表格添加和删除行，通过JavaScript操作DOM元素实现表格的动态更新。

function addtr() {
	var $table = $("#tab tr");
	var len = $table.length;
	$("#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++){
				$("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>");
　　　　}　
	}　
}