從表中刪除一行並重新索引表

Question

我試圖創建一個按鈕放在表中的每一行以刪除該行

錶行自己將創建的JavaScript上運行時

function createrow(){ 

    document.getElementById('totaltd').innerHTML = total; 

    var table = document.getElementById('baskettbl'); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell2 = row.insertCell(0); 
    cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false;">deleterow</a>'; 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML='price'; 

    var cell3 = row.insertCell(2); 
    cell3.innerHTML='name'; 

} 

這裏是我的去除行功能

function removerow(i){  
    var table = document.getElementById('baskettbl'); 
    table.deleteRow(i); 
} 

我的問題是，當我刪除行，如果該行是我的表中它會弄亂索引的中間因爲我定義removerow AR gument當我創造每一行

var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell2 = row.insertCell(0); 
    cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false; /> 

一樣，如果我有5行和與我刪除行[3] i的將結束與4行，但我的最後一行按鈕仍然要通過5到removerow功能和當然沒有行[5]

所以我想我應該簡單地

function removerow(i){ 

    var table = document.getElementById('baskettbl'); 
     table.deleteRow(i); 
    } 
    var rowCount = table.rows.length; 

     for(i=0 , i<= rowCount ; i++){ 
    var cell = 'cell'+i; 
     cell.innerHTML='<a href="" onclick="removerow('+0+'); return false; /> 
     } 

重新索引所有的行，但我需要設置在數字乳清的TD id，這樣我就可以改變自己innerhtml像這樣 所以這裏是我的問題：

1.如何設置像id這樣的屬性到創建的td中，以便我可以在稍後獲取它們的值？這是我如何創建它們

var cell2 = row.insertCell(0); 

2.I findout關於這顯然返回的行索引

功能removerow（X） { 警報（ 「行索引：」 rowIndex屬性+ x.rowIndex ）; } 因此，這將使我的工作變得簡單，我不需要重新創建所有索引，但是如何將點擊行'this'傳遞給該函數？這裏是我如何通過指數

var cell2 = row.insertCell(0); 
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); /> 

，也是我使用Dreamweaver CS5，它似乎並不認識的rowIndex

Answer 1

然後動態獲取指數和不設置它，當你創建：

function createrow(){ 
    document.getElementById('totaltd').innerHTML = total; 

    var table = document.getElementById('baskettbl'), 
     rowCount = table.rows.length, 
     row = table.insertRow(rowCount), 
     cell = row.insertCell(0), 
     a = document.createElement('a'); 

    a.href = '#'; 
    a.innerHTML = 'deleterow'; 
    a.onclick = function() { 
     // `this` refers to the `a` element. 
     removerow(this.parentNode.parentNode.rowIndex); 
     return false; 
    }; 

    cell.appendChild(a); 

    cell = row.insertCell(1); 
    cell.innerHTML='price'; 

    cell = row.insertCell(2); 
    cell.innerHTML='name'; 

    // still needed for IE memory leak? Don't know... 
    table = row = cell = a = null; 
}; 

設置單擊事件處理程序通過JavaScript更具可讀性呢（當然，你也可以只使用this.parentNode....在HTML字符串中）。上述

---

的代碼應該做你想要什麼（如果您有關於它的問題，只是評論）。不過，我想回答你的問題：

我該如何設置像id這樣的屬性到創建的td中，以便我可以在以後獲取它們的值？

知道一個重要的事情是，有一個差異之間HTML屬性和DOM屬性。 These answers describe it quite well，雖然它最初是關於jQuery的（但沒關係）。

不管怎樣，你已經知道如何設置innerHTML，你可以id做如此的相似：

cell.id = "something"; 

看一看的DOM element reference。

但我怎樣才能被點擊的行「這個」傳遞給功能

我或多或少在代碼表明此之上。在事件處理程序中，this引用您將事件綁定到的元素。我們知道它是一個a元素，它是td元素的子元素，它本身是tr元素的子元素。所以要獲得相應的行，我們可以訪問this.parentNode.parentNode。

---

有關JavaScript的更多信息，請致電have a look at the javascript tag information page。在那裏你會找到很多有用的鏈接來介紹各種與JavaScript相關的主題。
特別看看articles about event handling at quirksmode.org。

Answer 2

試試這個我希望這可以幫助你。

function createrow(){ 

     document.getElementById('totaltd').innerHTML = total; 

     var table = document.getElementById('baskettbl'); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     row.id = "row_"+rowCount; 
     var cell2 = row.insertCell(0); 
     cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false;">deleterow</a>'; 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML='price'; 

     var cell3 = row.insertCell(2); 
     cell3.innerHTML='name'; 

    } 




function removerow(i){  
    var table = document.getElementById('baskettbl'); 
    table.removeChild(document.getElementById("row_"+i)); 
}