使用jquery对表格的行进行增删。要求：用按钮对表格的行进行增删，并且增加的行数不能超过5行。。
展开全部
$(document).ready(function(){
// 增加一行
var i=1;
$("#add").click(function(){
if(i<5){
var idval = 'tr'+i;
var opp = 'td'+i;
var tr = "<tr id="+idval+" height='25'><td><input type='text' name='spec' value='' id="+opp+" size='30' /> </td></tr>";
$(tr).appendTo("#table");
}
i++;
});
// 点击删除，则删除对应的行
$("#del").click(function(){
var tr_id = $("table>tbody>tr:last").attr("id");
$("#"+tr_id).remove();
});
});
也可以给tr赋值id号，删除的时候检索到id值，对应删除行就好了。。
你下载附件试试，测试过了，ok的。。。id、class之类的对应修改好就好了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title>
</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var row_count = 0;
function addNew()
{
var table1 = $('#table1');
var firstTr = table1.find('tbody>tr:first');
var row = $("<tr></tr>");
var td = $("<td></td>");
if (row_count < 5){
td.append($("<b>TR TD"+row_count+"</b>")
);
row.append(td);
table1.append(row);
row_count++;
}
}
function del()
{
var table1 = $('#table1');
var lasttr = table1.find('tbody>tr:last');
if (row_count > 0){
lasttr.remove();
row_count = row_count-1;
}
}
</script>
</head>
<body>
<input type="button" value="Add" onclick="addNew();">
<input type="button" value="Delete" onclick="del();">
<div id="rightcontent">
<table id="table1" cellspacing="3" cellpadding="3" border="1">
<tbody>
<tr>
<th>下面举例</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
增加一行，就给row_count+1，判断，没有超过5就执行，超过5了，点击也不执行，
删除一行，就-1，=0了就是说没有行了，就不执行remove()
，也可以判断给按钮加一个禁止样式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var rowsnum=0;
$("#add_row").click(function(){
rowsnum++;
if(rowsnum<=5)
$("#table").append("<tr><td class='td_title'><input type='text' name='agenda' class='input100'/></td><td class='td_display center'><input type='button' value='删除' class='btn4' onclick='deleteRows(this)'/></td></tr>");
});
function deleteRows(obj){
$(obj).parent().parent().remove();
}
看老夫这答案只值5分吗
$("#add_row").click(function(){
rowsnum++;
if(rowsnum<=5)
$("#table").append("<tr><td class='td_title'><input type='text' name='agenda' class='input100'/></td><td class='td_display center'><input type='button' value='删除' class='btn4' onclick='deleteRows(this)'/></td></tr>");
});
function deleteRows(obj){
$(obj).parent().parent().remove();
}
看老夫这答案只值5分吗
追问
如果我增加了5行后，删除一行，再增加一行就不行了。。求再次解答。。
追答
rowsnum--;
在deleteRows中啊 我去 你真是逗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
