提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery表格的增行删行实现思路

jQuery思路 实现 表格
2023-06-13 09:14:48 时间
在做后台中遇到的情况，分享下
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<title>表格增行，删行处理</title>
<scripttype="text/javascript"src="http://jt.875.cn/js/jquery"></script>
</head>
<body>
<script>
$(function(){
varshow_count=20;//要显示的条数
varcount=$("input:text").val();//递增的开始值，这里是你的ID
varfin_count=parseInt(count)+(show_count-1);//结束递增的条件
$("#btn_addtr").click(function(){
if(count<fin_count)//点击时候，如果当前的数字小于递增结束的条件
{
$("tr:eq(1)").clone().appendTo("table");//在表格后面添加一行
$("tr:lasttdinput:first").val(++count);//改变添加的行的ID值。
}
});
});
functiondeltr(){
varlength=$("tr").length;
if(length<=2){
alert("至少保留一行");
}else{
$("tr:last").remove();
}
}
</script>
<inputtype="button"id="btn_addtr"value="增行">
<tableid="dynamicTable"width="700"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdheight="30"align="center"bgcolor="#CCCCCC">ID</td>
<tdalign="center"bgcolor="#CCCCCC">Username</td>
<tdalign="center"bgcolor="#CCCCCC">Usertype</td>
<tdalign="center"bgcolor="#CCCCCC">Other</td>
<td></td>
</tr>
<tr>
<divstyle="background:#ccc;">
<tdheight="30"align="center"><inputtype="text"size="2"value="1"/></td>
<tdalign="center"><inputtype="text"name="username"/></td>
<tdalign="center">
<selectname="type">
<optionvalue="1">Administrator</option>
<optionvalue="2">Guest</option>
</select>
</td>
<tdalign="center"><inputtype="text"name="username2"/></td>
<td><inputtype="button"id="btn_deltr"onclick="deltr()"value="删行"></td>
</div>
</tr>
</table>
</body>
</html>

相关文章