jquery动态增加删除表格行的小例子
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery动态增加删除表格⾏的⼩例⼦复制代码代码如下:
<script src="jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body{background:#FFFFFF;}
</style>
</head>
<body>
<script>
$(function(){
var show_count = 20; //要显⽰的条数
var count = $("input:text").val(); //递增的开始值，这⾥是你的ID
var fin_count = parseInt(count) + (show_count-1); //结束递增的条件
$("#btn_addtr").click(function(){
if(count < fin_count) //点击时候，如果当前的数字⼩于递增结束的条件
{
$("tr:eq(1)").clone().appendTo("table"); //在表格后⾯添加⼀⾏
$("tr:last td input:first").val(++count); //改变添加的⾏的ID值。
}
});
});
function deltr(){
var length=$("tr").length;
if(length<=2){
alert("⾄少保留⼀⾏");
}else{
$("tr:last").remove();
}
}
</script>
<input type="button" id="btn_addtr" value="增⾏">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
<td></td>
</tr>
<tr>
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input type="text" name="username" /></td>
<td align="center">
<select name="type">
<option value="1">Administrator</option>
<option value="2">Guest</option>
</select>
</td>
<td align="center"><input type="text" name="username2" /></td>
<td><input type="button" id="btn_deltr" onclick="deltr()" value="删⾏"></td>
</tr>
</table>
</body>。