1 // 通过dom对象完成 注释掉了
2
3 /**
4 function insertRows(){
5
6 var tempRow=0;
7 var tbl=document.getElementById("dictTbl");
8 tempRow=tbl.rows.length;
9 var Rows=tbl.rows;//类似数组的Rows
10 var newRow=tbl.insertRow(tbl.rows.length);//插入新的一行
11 var Cells=newRow.cells;//类似数组的Cells
12 for (i=0;i<3;i++)//每行的3列数据
13 {
14 var newCell=Rows[newRow.rowIndex].insertCell(Cells.length);
15 newCell.align="center";
16 switch (i)
17 {
18 case 0 : newCell.innerHTML=""+tempRow+"";break;
19 case 1 : newCell.innerHTML="<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>";break;
20 case 2 : newCell.innerHTML="<a href='javascript:delTableRow(\""+tempRow+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";break;
21
22 }
23 //alert(newCell.innerHTML);
24 }
25 }
26 function delTableRow(rowNum){
27
28 var tbl=document.getElementById("dictTbl");
29
30 if (tbl.rows.length >rowNum){
31
32 tbl.deleteRow(rowNum);
33
34 for (i=rowNum;i<tbl.rows.length;i++)
35 {
36 tbl.rows[i].cells[0].innerHTML=i;
37 tbl.rows[i].cells[2].innerHTML="<a href='javascript:delTableRow(\""+i+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";
38 tbl.rows[i].cells[1].childNodes[0].id=i;
39 }
40 }
41 }
42 */
43
44 //jquery方式
45 function insertRows(){
46 //获取表格对象
47 var tb1 = $("#dictTbl"); // 找table的ID
48 var tempRow = $("#dictTbl tr").size(); //获取表格的行数
49 var $tdNum = $("<td align='center'></td>"); //创建第一个td
50 $tdNum.html(tempRow); //html把序号放到了第一个td里面
51
52 var $tdName = $("<td align='center'></td>"); //再创建一个td
53 $tdName.html("<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>");//放文本框
54
55 var $tdDel = $("<td align='center'></td>"); //第三个td
56 $tdDel.html("<a href='javascript:delTableRow(\""+tempRow+"\")'>
57 <img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>"); //里面添加了一个超链接 超链接里面有个删除的方法
58
59
60 // 创建tr，将3个td放置到tr中
61 var $tr = $("<tr></tr>");
62 $tr.append($tdNum);
63 $tr.append($tdName);
64 $tr.append($tdDel);
65 //在表格的最后追加新增的tr
66 tb1.append($tr);
67 }
68
69 function delTableRow(rowNum){
70 //改变行号和删除的行号
71 var tb1 = $("#dictTbl"); //找table的ID
72 var tempRow = $("#dictTbl tr").size();//获取表格的行数
73 if (tempRow >rowNum){
74 //获取删除行的id指定的对象，例如：<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>
75 $("#"+rowNum).parent().parent().remove(); //找要删除行的id 的父td（即第二个td）的父tr 然后自杀jquery可以自杀
76 //加1表示寻找下一个id，目的是将后面tr的格式向上移动
77 for (i=(parseInt(rowNum)+1);i<tempRow;i++){
78 //将i-1的值赋值给编号 【i现在是删除行的下一行 假设删除4 i现在是5 i-1=4】
79 //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
80 //id在第二个td即input中，所以用prev（）得到第一个td（含有编号的td）
81 $("#"+i).parent().prev().html(i-1); //修改第一个td序号：假设删除4现在把后面的标号5变为了4
82
83 //修改第三个td： 将i-1（即4）的值赋值给超链接的删除
84 $("#"+i).parent().next().html("<a href='javascript:delTableRow(\""+(i-1)+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");//
85 //修改第二个td： 将i-1（即4）的值赋值给文本框的id，用于删除 attr() 方法设置或返回被选元素的属性值。
86 $("#"+i).attr("id",(i-1));//将id设置成i-1
87 }
88 }
89 }
