您的位置：首页 > Web前端 > JQuery

JQuery动态添加删除表格

2012-07-21 11:54 543 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航