添加删除表格（js完成）自己实际项目

Posted 2020-08-15 涤新云

 

 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 }