jqeury 动态删除、添加表格demo
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>download by http://www.codefans.net</title> <link href="App_Files/CSS/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #tb .td{ text-align: center; font-weight: bold; background-color: #6699FF; color: #FFFFFF; border:1px solid #000; } </style> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //隐藏模板tr $("#tb tr").eq(2).hide(); var i = 0; $("#BtAdd").click(function() { //复制一行 var tr = $("#tb tr").eq(2).clone(); tr.find("td").get(0).innerHTML = ++i; tr.show(); tr.appendTo("#tb"); }); $("#BtDel").click(function() { $("#tb tr:gt(2)").each(function() { if ($(this).find("#CK").get(0).checked == true) { $(this).remove(); } }); i = 0; $("#tb tr:gt(2)").each(function() { $(this).find("td").get(0).innerHTML = ++i; }); $("#CKA").attr("checked", false); }); $("#CKA").click(function() { $("#tb tr:gt(2)").each(function() { $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked; }); }); }) </script></head><body> <form id="form1"> <div> <table id="tb" style="border:1px solid #000;"> <tr> <td colspan="10" style="text-align:right"> <input id="BtAdd" type="button" value="添加" /> <input id="BtDel" type="button" value="删除" /></td> </tr> <tr> <td style="width:25px;"></td> <td style="width:25px;"> <input id="CKA" name="CKA" type="checkbox"/></td> <td style="width:20%;"> 字段名</td> <td style="width:20%;"> 名称</td> <td style="width:15%;"> 数据类型</td> <td style="width:40px;"> 主键</td> <td style="width:40px;"> 必填</td> <td style="width:20%;"> 长度</td> <td style="width:40px;"> 有效</td> <td style="width:80px;"> 排序</td> </tr> <tr> <td style="text-align: center"></td> <td style="text-align: center"> <input id="CK" type="checkbox" name="CK"/></td> <td style="text-align: center"> <input id="TName" type="text" name="TName" /></td> <td style="text-align: center"> <input id="TRm" type="text" name="TRm" /></td> <td style="text-align: center"> <select id="SType" name="SType" style=" width:100px;"> <option>1</option> <option>2</option> </select></td> <td style="text-align: center"> <input id="CKIsPR" type="checkbox" name="CKIsPR"/></td> <td style="text-align: center"> <input id="CKIsNull" type="checkbox" name="CKIsNull"/></td> <td style="text-align: center"> <input id="TLen" type="text" size="10" name="TLen" /></td> <td style="text-align: center"> <input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse"/></td> <td style="text-align: center"> <input id="TxtSortNO" type="text" size="4" name="TxtSortNO" /></td> </tr> </table> </div> </form></body></html>?
?