[转]jquery动态添加删除表格
<style type="text/css">
body{
font-size: 13px;
}
table{
text-align: center;
border:solid 1px #eee;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
td{
border: solid 1px #eee;
width: 15%;
}
table{
margin-bottom: 0px;
margin-top: 0px;
}
</style>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=1;
//动态添加一行
$("#btn").click(function(){
var $tr = $("<tr>"
+"<td>" + i + "</td>"
+"<td><input name =''/></td>"
+"<td><input name =''/></td>"
+"</tr>");
//$tr.appendTo($("#mark"));
$("#mark").append($tr);
$("tr:gt(1):not(:last):odd").css("background-color", "#FFFFF2");
$("tr:gt(1):not(:last):even").css("background-color", "#FBF5E6");
$("#submit").css("display","block");
i++;
});
//删除表格中最后一行
$("#btnDel").click(function(){
$("#content tr:gt(1):last").remove();
});
});
</script>
<body>
<form action="" method="post">
<table align="center" id="content">
<tr>
<td colspan="3" style="text-align: right;">
<button id="btn">add</button>
<button id="btnDel">delete</button>
</td>
</tr>
<tr id="mark">
<td>id</td>
<td>name</td>
<td>desc</td>
</tr>
</table>
<table align="center" id="sub">
<tr>
<td colspan="3" style="text-align: left;"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>
body{
font-size: 13px;
}
table{
text-align: center;
border:solid 1px #eee;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
td{
border: solid 1px #eee;
width: 15%;
}
table{
margin-bottom: 0px;
margin-top: 0px;
}
</style>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=1;
//动态添加一行
$("#btn").click(function(){
var $tr = $("<tr>"
+"<td>" + i + "</td>"
+"<td><input name =''/></td>"
+"<td><input name =''/></td>"
+"</tr>");
//$tr.appendTo($("#mark"));
$("#mark").append($tr);
$("tr:gt(1):not(:last):odd").css("background-color", "#FFFFF2");
$("tr:gt(1):not(:last):even").css("background-color", "#FBF5E6");
$("#submit").css("display","block");
i++;
});
//删除表格中最后一行
$("#btnDel").click(function(){
$("#content tr:gt(1):last").remove();
});
});
</script>
<body>
<form action="" method="post">
<table align="center" id="content">
<tr>
<td colspan="3" style="text-align: right;">
<button id="btn">add</button>
<button id="btnDel">delete</button>
</td>
</tr>
<tr id="mark">
<td>id</td>
<td>name</td>
<td>desc</td>
</tr>
</table>
<table align="center" id="sub">
<tr>
<td colspan="3" style="text-align: left;"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>