首页 > 代码库 > 添加删除表格(js完成)【自己实际项目】
添加删除表格(js完成)【自己实际项目】
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=http://www.mamicode.com/${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand>";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=http://www.mamicode.com/${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand>"; 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=http://www.mamicode.com/${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand>"); //里面添加了一个超链接 超链接里面有个删除的方法 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=http://www.mamicode.com/${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand>");// 85 //修改第二个td: 将i-1(即4)的值赋值给文本框的id,用于删除 attr() 方法设置或返回被选元素的属性值。 86 $("#"+i).attr("id",(i-1));//将id设置成i-1 87 } 88 } 89 }
添加删除表格(js完成)【自己实际项目】
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。