OnClicks鏈接到錯誤的按鈕

我試圖鏈接每行按鈕以刪除該行點擊。但是，每個刪除按鈕鏈接到最後創建的行的onclick刪除。OnClicks鏈接到錯誤的按鈕

例如：

表

記錄1 | deleteButton1

記錄2 | deleteButton2

記錄3 | deleteButton3

操作：

點擊deleteButton1 --->刪除了該行以「記錄3」

點擊deleteButton1 --->嘗試刪除與行「Record 3」（又沒有任何反應發生的行/列找不到）

clicks deleteButton2 --->試圖刪除「記錄3」的行（又名。什麼也沒有發生未發現B/C行）

HTML：

<table id="Table"></table>

的JavaScript：

//Code snippet 
for (var x = 0; x < itemArray.length; x++) 
{ 
    selectedItem = itemArray[x]; 
    table = document.getElementById("Table"); 
    row = table.insertRow(table.rows.length); 
    cell1 = row.insertCell(0); 
    cell2 = row.insertCell(1); 

    cell1.innerHTML = selectedItem; 
    cell2.innerHTML = "<button>—</button>"; //Delete button across every row. 
    cell2.onclick = function() { removeRow(selectedItem); }; 
} 

function removeRow(content, where) 
{ 
      var table; 

      table = document.getElementById("Table"); 

      var iter; 

      for (var i = 0; i < table.rows.length; i++) 
      { 
       iter = table.rows[i].cells[0].innerHTML; 

       if (iter == content) 
       { 
        table.deleteRow(i); 
       } 
      } 
}

來源

2014-03-04 ImaTautology

應該''是'<表ID = 「表」>'？ –

好吧，現在它已修復 – ImaTautology

每個onclick函數引用變量selectedItem。在for循環之後，該變量被設置爲數組中的最後一項。所以，每個按鈕都會引用最後一個項目。 Here is a demonstration。

我建議使用Javascript的parentNode和rowIndex來允許按鈕引用自己的父行。

在下面我的例子，rowIndex返回tr的索引數字，表示爲parentNode點擊的小區（td）。該索引號可用於直接刪除表格行。

cell2.onclick = function() { removeRow(this.parentNode.rowIndex); }; 

function removeRow(x) { 
    document.getElementById("Table").deleteRow(x); 
}

Working Example (jsFiddle)

來源

2014-03-04 17:51:52 showdev

Oooooooh！說得通！我期望JavaScript將selectedItem複製到每個onClicks b/c中，我認爲「var selectedItem」將在像C＃這樣的for循環之後被銷燬。但是後來，我讀到JavaScript中的封閉性，這與我的意識形態相矛盾，所以現在我意識到學習編程語言理論的力量。 – ImaTautology

另外，你的方法真的幫助縮短了我的代碼塊:) – ImaTautology

您可能需要像這樣：

http://www.codingforums.com/javascript-programming/170869-dynamically-add-delete-reorder-rows-table.html

這裏：

 for (var i= startingIndex; i< tbl.tBodies[0].rows.length; i++) { 

      // CONFIG: next line is affected by myRowObject settings 
      tbl.tBodies[0].rows[i].myRow.one.data = count; // text 

      // CONFIG: next line is affected by myRowObject settings 
      tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_FS; // input text 
      tbl.tBodies[0].rows[i].myRow.two.id = INPUT_NAME_FS + count; 

      tbl.tBodies[0].rows[i].myRow.three.name = INPUT_NAME_FS_DESIGN; // input text 
      tbl.tBodies[0].rows[i].myRow.three.id = INPUT_NAME_FS_DESIGN + count; 


      // CONFIG: next line is affected by myRowObj settings 

      // CONFIG: requires class named classy0 and classy1 
      tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); 

      count++; 
     }

來源

2014-03-04 17:36:10

OnClicks鏈接到錯誤的按鈕

回答

相關問題