2013-01-08 110 views
2

我有一個html頁面,我添加行並動態刪除行。現在我的目標是重新排序更新id的行。使用javascript在html中重新排序動態表格

例如我有一列中的第3列給出了一個基於rowid的id列。所以一旦我刪除一行,我需要重新排序這個ID。這是可能的使用JavaScript。

示例代碼是在這裏

<SCRIPT language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      cell1.appendChild(element1); 

      var cell2 = row.insertCell(1); 
      cell2.innerHTML = rowCount ; 

      var cell3 = row.insertCell(2); 
      var element2 = document.createElement("input"); 
      element2.type = "text"; 
      element2.id = "batch"+rowCount; 
      cell3.appendChild(element2); 

     } 

     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) { 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 

      } 
      }catch(e) { 
       alert(e); 
      } 
     } 

</SCRIPT> 

<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> 
     </TR> 
</TABLE> 

+0

你的意思是你想重新排序所有的ID? –

+0

是的。我還需要更新文本的ID。 Regays, Manish Jain – MRJ

+0

其實你應該從1 –

回答

0

試試這個:

function reorder(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    for(var i=1; i<=rowCount; i++) { 
     var row = table.rows[i]; 
     row.cells[1].innerHTML= i; 
    } 
} 

希望它的工作。

+0

開始你的結構Hi Poya,我已經得到了重新排序表的代碼。我會嘗試你給出的代碼,並返回結果。非常感謝您抽出時間回覆查詢。 – MRJ