如何在Javascript表中添加動態序列號

Question

我有一個表有兩個按鈕（添加&刪除）。該表包含三列（一個複選框，一個文本框和一個下拉框）。因此，當我點擊添加按鈕時，將插入一個複選框，一個文本框和一個下拉框。我想要做的是再添加一個包含Serial-No的列。序列號應該隨着每一個新行增加。就像... 1,2,3,4等。然後，當我想要刪除一行時，我會在複選框上勾選一個標記並按下刪除按鈕，該特定行將被刪除。序列號應該重新排列。我的代碼如下：

HTML

<div class="container"> 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

<TABLE id="dataTable" width="350px" border="1"> 
    <TR> 
     <TD><INPUT type="checkbox" name="chk"/></TD> 
     <TD><INPUT type="text" name="txt"/></TD> 
     <TD> 
      <SELECT name="country"> 
       <OPTION value="in">India</OPTION> 
       <OPTION value="de">Germany</OPTION> 
       <OPTION value="fr">France</OPTION> 
       <OPTION value="us">United States</OPTION> 
       <OPTION value="ch">Switzerland</OPTION> 
      </SELECT> 
     </TD> 
    </TR> 
</TABLE> 

的Javascript

<SCRIPT language="javascript"> 
     function addRow(tableID) { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
      } 
     } 
    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       if(rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
     }catch(e) { 
      alert(e); 
     } 
    } 
</SCRIPT> 

Answer 1

function addRow(tableID) { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     var row = table.insertRow(rowCount); 
 
     var colCount = table.rows[0].cells.length; 
 

 
     for(var i=0; i<colCount; i++) { 
 
      var newcell = row.insertCell(i); 
 
      if(i==1){newcell.innerHTML = (rowCount+1)} 
 
      else{ 
 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
       } 
 
      switch(newcell.childNodes[0].type) { 
 
       case "text": 
 
         newcell.childNodes[0].value = ""; 
 
         break; 
 
       case "checkbox": 
 
         newcell.childNodes[0].checked = false; 
 
         break; 
 
       case "select-one": 
 
         newcell.childNodes[0].selectedIndex = 0; 
 
         break; 
 
       
 
      } 
 
     } 
 
    } 
 

 
function regroup(i,rc,ti) 
 
{ 
 
    for(j = (i+1);j<rc;j++) 
 
    { 
 
     document.getElementById(ti).rows[j].cells[1].innerHTML = j+1; 
 
     } 
 
} 
 
function deleteRow(tableID) { 
 
     try { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     var current = ''; 
 
     for(var i=0; i<rowCount; i++) { 
 
      var row = table.rows[i]; 
 
      var chkbox = row.cells[0].childNodes[0]; 
 
      if(null != chkbox && true == chkbox.checked) { 
 
       if(rowCount <= 1) { 
 
        alert("Cannot delete all the rows."); 
 
        break; 
 
       } 
 
       
 
       table.deleteRow(i); 
 
       rowCount--; 
 
       i--; 
 
       regroup(i,rowCount,tableID); 
 
      } 
 
     } 
 
     }catch(e) { 
 
      alert(e); 
 
     } 
 
    }

<div class="container"> 
 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
 

 
<TABLE id="dataTable" width="350px" border="1"> 
 
    <TR> 
 
     <TD><INPUT type="checkbox" name="chk"/></TD> 
 
     <TD><span name = "num">1</span></TD> 
 
     <TD><INPUT type="text" name="txt"/></TD> 
 
     <TD> 
 
      <SELECT name="country"> 
 
       <OPTION value="in">India</OPTION> 
 
       <OPTION value="de">Germany</OPTION> 
 
       <OPTION value="fr">France</OPTION> 
 
       <OPTION value="us">United States</OPTION> 
 
       <OPTION value="ch">Switzerland</OPTION> 
 
      </SELECT> 
 
     </TD> 
 
    </TR> 
 
</TABLE>

試試上面的方法，看看它是否適合你， 我剛纔 併爲數字的單元格， 那麼當一個新行創造了新列單元格中值是由數給出行添加1爲新創建也我 包括一個函數來更新刪除列後的每個行的序列號單元格的值。