添加刪除表格（js完成）【自己實際項目】

標籤：input   文本   刪除   rem   next   表格   script   自己   第一個   

 

 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的ID48     var tempRow = $("#dictTbl tr").size();  //擷取表格的行數49     var $tdNum = $("<td align=‘center‘></td>"); //建立第一個td50     $tdNum.html(tempRow); //html把序號放到了第一個td裡面51     52     var $tdName = $("<td align=‘center‘></td>");  //再建立一個td53     $tdName.html("<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>");//放文字框54     55     var $tdDel = $("<td align=‘center‘></td>"); //第三個td56     $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     //在表格的最後追加新增的tr66     tb1.append($tr);67 } 68 69 function delTableRow(rowNum){ 70    //改變行號和刪除的行號71    var tb1 = $("#dictTbl");  //找table的ID72    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變為了482      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-187       }88    }89 }

 

添加刪除表格（js完成）【自己實際項目】