1、web開發的項目中我們做條件查詢，資料添加，附件上傳等功能時候需要給予使用者更多的動态選擇，這樣就不能将<input />框的個數寫死，是以動态操作表格式一個不錯的選擇！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/></code>
<code><</code><code>title</code><code>>無标題文檔</</code><code>title</code><code>></code>
<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"jQuery/jquery-1.6.2.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code> </code><code>function AddSignRow(){</code>
<code> </code><code>/*var str2=document.getElementById("trid").innerHTML;//這是通過js擷取的一個tr中的所有元素</code>
<code> </code><code>alert(str2);*/</code>
<code> </code><code>var trObj="<</code><code>tr</code> <code>>"+$("#trid").html()+"</</code><code>tr</code><code>>";//通過jquery擷取一個tr中所有的元素，然後拼成一個tr</code>
<code> </code><code>var str=$("#tableid").find("tr").length;//擷取table中tr總行數</code>
<code> </code><code>if(str==11){//假如tr長度為11，也就是說，去掉第一個tr，還有10個tr的時候，停止增長，意思是最多隻能新增10個tr</code>
<code> </code><code>return;</code>
<code> </code><code>}</code>
<code> </code><code>$("#trid").after(trObj);//在這個<</code><code>tr</code><code>段落>之後插入一個HTML标記代碼這是jquery外部插入，内部插入$("#tableid").append(trObj); </code>
<code> </code><code>}</code>
<code> </code><code>function deleteRow(obj){</code>
<code> </code><code>var str=$("#tableid").find("tr")[1];//擷取table表中的所有tr，然後取第2個，因為是0,1,2,3</code>
<code> </code><code>var tr=obj.parentNode.parentNode; //擷取obj代表是<</code><code>a</code><code>> 上一個父節點是<</code><code>td</code><code>> 再上就是<</code><code>tr</code><code>></code>
<code> </code><code>if(str==tr){ //加入擷取的obj的再上父節點是第二個tr 不允許删除</code>
<code> </code><code>var tbody=tr.parentNode; //擷取tr的父節點</code>
<code> </code><code>tbody.removeChild(tr); //tr的父節點(tbody)移除tr</code>
<code></</code><code>script</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code><</code><code>div</code> <code>class</code><code>=</code><code>"body_context"</code> <code>align</code><code>=</code><code>"center"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"table_context"</code><code>></code>
<code> </code><code><</code><code>table</code> <code>width</code><code>=</code><code>"80%"</code> <code>border</code><code>=</code><code>"1"</code> <code>cellspacing</code><code>=</code><code>"0"</code> <code>cellpadding</code><code>=</code><code>"0"</code> <code>id</code><code>=</code><code>"tableid"</code><code>></code>
<code> </code><code><</code><code>thead</code><code>></code>
<code> </code><code><</code><code>tr</code><code>></code>
<code> </code><code><</code><code>th</code><code>>姓名</</code><code>th</code><code>><</code><code>th</code><code>>照片</</code><code>th</code><code>><</code><code>th</code><code>>職業</</code><code>th</code><code>><</code><code>th</code><code>>操作</</code><code>th</code><code>></code>
<code> </code><code></</code><code>tr</code><code>></code>
<code> </code><code></</code><code>thead</code><code>></code>
<code> </code><code><</code><code>tr</code> <code>id</code><code>=</code><code>"trid"</code><code>></code>
<code> </code><code><</code><code>td</code><code>><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>""</code> <code>style</code><code>=</code><code>"border:0px;"</code><code>/></</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>><</code><code>input</code> <code>type</code><code>=</code><code>"file"</code> <code>name</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>""</code> <code>style</code><code>=</code><code>"border:0px;"</code><code>/></</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>onclick</code><code>=</code><code>"deleteRow(this)"</code> <code>style</code><code>=</code><code>"text-decoration:none;"</code><code>>移除</</code><code>a</code><code>></</code><code>td</code><code>></code>
<code> </code><code></</code><code>table</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"border-bottom: 1px solid #088000;margin-bottom: 10px;margin-top:10px;width:80%;"</code> <code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"padding-left:0px;padding-top:5px;"</code><code>><</code><code>a</code> <code>onclick</code><code>=</code><code>"AddSignRow()"</code> <code>href</code><code>=</code><code>"javascript:void(0)"</code> <code>>建立</</code><code>a</code><code>></</code><code>div</code><code>></code>
<code></</code><code>div</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
本文轉自 小夜的傳說 51CTO部落格，原文連結：http://blog.51cto.com/1936625305/1428201，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)