jquery 讀取table tr td 中的資料
阿新 • • 發佈：2018-12-13
難點：
（1）動態增加、刪除tr和td
（2）每天tr和td都有下標，且下標要動態變化，
（3）tr和td為什麼下標不能隨便寫，原因是此處需要把所有tr中的資料以list的形式傳送到後臺物件中，所有每天tr中的tr中name=‘物件[index].屬性’，必須有下標且下標要從0開始且要連續不能跳躍
（4）增加tr和td需要學習細節有：
建立td var $tdName = $("<td class='in-ctt'></td>");
td新增內容 $tdName.html("<input name=\'teams["+tempRow+"].uname\' value=\'\'/>");
tr增加td $tr.append($tdName);
表格最後一行增加tr tb1.append($tr);
（5）刪除tr和td的學習細節有：
把要刪除的tr下標傳回 delRows(sub)
如何刪除tr $("#_tr_"+sub).remove();
迴圈後面的tr如何獲取每個td 每天td的對應name屬性角標要全部修改
$("input[name='teams["+i+"].uname']").attr("name","teams["+(i-1)+"].uname");
（6）本內容關鍵是熟悉Jquery的選取器 方法等知識點
而且要細心，自己在做的時候下標總是調不對（原因是name賦值時誤加了'和]符號）
1 //新增團隊資訊的
2 function insertRows(){
3 //獲取表格物件
4 var tb1 = $("#viewTabs"); // 找table的ID
5 var rowNum= $("#viewTabs tr").size(); //獲取表格的行數
6 //var liNum=$("tr[id^='_tr_']").size(); //獲取以_tr_開頭測tr個數
7 var tempRow=rowNum-1;; //用於新增tr、td、屬性下標
8 var $tdName = $("<td class='in-ctt'></td>"); //建立第一個td
9 $tdName.html("<input name=\'teams["+tempRow+"].uname\' value=\'\'/>"); //html把序號放到了第一個td裡面
10
11 var $tdDept = $("<td class='in-ctt'></td>"); //第二個td
12 $tdDept.html("<input name=\'teams["+tempRow+"].deptname\' value=\'\' />");//放文字框
13
14 var $tdPoints = $("<td class='in-ctt'></td>"); //第三個td
15 $tdPoints.html("<input style=\'width:420px;\' name=\'teams["+tempRow+"].points\' value=\'\'/>");//放文字框
16
17 var $tdLeader = $("<td class='in-ctt'></td>"); //第四個td
18 $tdLeader.html("<input type=\'radio\' name=\'teams["+tempRow+"].leader\' value=\'1\' />是 "
19 +"<input type=\'radio\' name=\'teams["+tempRow+"].leader\' value=\'2\' checked=\'checked\' />否");//放文字框
20 var $tdDel = $("<td class='in-ctt'></td>"); //第五個td
21 $tdDel.html("<input hidden=\'hidden\' name=\'teams["+tempRow+"].busid\' value=\'${bean.id}\' />"
22 +"<input type=\'button\' value=\'刪除\' name=\'del["+tempRow+"]\' onclick=\'delRows("+tempRow+")\'>"); //裡面添加了一個超連結 超連結裡面有個刪除的方法
23
24 var $tr = $("<tr id=\'_tr_"+tempRow+"\' class=\'in-opt\'></tr>");// 建立tr，將3個td放置到tr中
25 $tr.append($tdName);
26 $tr.append($tdDept);
27 $tr.append($tdPoints);
28 $tr.append($tdLeader);
29 $tr.append($tdDel);
30 //在表格的最後追加新增的tr
31 tb1.append($tr);
32 }
33 //刪除tr和td並且移動後面的tr和td且下標要一致
34 function delRows(sub){
35 //var temp=[]; 本來用於儲存上移動tr中的td屬性值 後來發現會自動匹配資料 所以隱藏了
36 var rowNum=sub+1; //此處的規律是：行號為下標+1
37 var tb1 = $("#viewTabs"); //找table的ID
38 var tempRow = $("#viewTabs tr").size();//獲取表格的行數
39 if (tempRow >rowNum){
40 $("#_tr_"+sub).remove(); //刪除tr
41 for (i=(parseInt(sub)+1);i<tempRow-1;i++){
42 //temp[0]=$("input[name=teams["+i+"].uname]").val();
43 //temp[1]=$("input[name=teams["+i+"].deptname]").val();
44 //temp[2]=$("input[name=teams["+i+"].points]").val();
45 //temp[3]=$("input[name=teams["+i+"].leader]").val();
46 //temp[4]=$("input[name=teams["+i+"].busid]").val();
47 $("#_tr_"+i).attr("id","_tr_"+(i-1)+"");
48 $("input[name='del["+i+"]']").attr("onclick","delRows("+(i-1)+")");
49 $("input[name='del["+i+"]']").attr("name","del["+(i-1)+"]");
50 $("input[name='teams["+i+"].uname']").attr("name","teams["+(i-1)+"].uname");
51 $("input[name='teams["+i+"].deptname']").attr("name","teams["+(i-1)+"].deptname");
52 $("input[name='teams["+i+"].points']").attr("name","teams["+(i-1)+"].points");
53 $("input[name='teams["+i+"].leader']").attr("name","teams["+(i-1)+"].leader");
54 $("input[name='teams["+i+"].busid']").attr("name","teams["+(i-1)+"].busid");
55
56 }
57 }
58
59 }
html
1 <!-- 團隊資訊 -->
2 <div class="pane">
3 <div class="in-btn">
4 <input type="text" style="display: none;" />
5 </div>
6 <div style="clear: both;"></div>
7 <div style="float: right; padding: 0 20px 5px 0;"><input type="button" value="新增" onclick="insertRows()"/></div>
8
9 <table border="0" cellpadding="0" cellspacing="0"
10 class="in-tb margin-top5" id="viewTabs">
11 <tr class="in-opt">
12 <th class="in-ctt" style="background-color: #f7f7f7;"
13 width="15%">姓名</th>
14 <th class="in-ctt" style="background-color: #f7f7f7;"
15 width="15%">單位</th>
16 <th class="in-ctt" style="background-color: #f7f7f7;"
17 width="40%">履歷亮點</th>
18 <th class="in-ctt" style="background-color: #f7f7f7;"
19 width="15%">是否是導師</th>
20 <th class="in-ctt" style="background-color: #f7f7f7;"
21 width="15%">操作</th>
22 </tr>
23 <c:forEach items="${bean.teams}" var="team" varStatus="i">
24 <tr id="_tr_${i.index}" class="in-opt">
25 <td class="in-ctt">
26 <input name="teams[${i.index}].uname" value="${team.uname}" /></td>
27 <td class="in-ctt">
28 <input name="teams[${i.index}].deptname" value="${team.deptname}" /></td>
29 <td class="in-ctt">
30 <input name="teams[${i.index}].points" value="${team.points}" style="width:420px;"/></td>
31 <td class="in-ctt">
32 <c:if test="${team.leader==1}">
33 <input type="radio" name="teams[${i.index}].leader" value="1" checked="checked" />是
34 <input type="radio" name="teams[${i.index}].leader" value="2" />否
35 </c:if>
36 <c:if test="${team.leader==2}">
37 <input type="radio" name="teams[${i.index}].leader" value="1" />是
38 <input type="radio" name="teams[${i.index}].leader" value="2" checked="checked" />否
39 </c:if></td>
40 <td class="in-ctt">
41 <input type="hidden" name="teams[${i.index}].busid" value="${bean.id}" />
42 <input type="button" value="刪除" name="del[${i.index}]" onclick="delRows(${i.index})"></input></td>
43 </tr>
44 </c:forEach>
45 </table>
46 </div>