Javascript：單擊時刪除特定的表格單元格

Question

我當時正在做一個大學項目。 他們告訴我們制作2個陣列。 第一個將包含3個包含3個圖像的單元格，第二個將包含1行為空。

我需要從第一個表中每次單擊的單元格中刪除圖像，然后將其復制到第二個表中！

我的問題是deleteCell()函數每次只會刪除第一個元素。 我不知道如何從我的表行刪除點擊的細胞！

我的JS：

var table1 = document.getElementById("myTable");
var table2 = document.getElementById("myTable2");

function DL1() {

  var row = document.getElementById("myRow1");
  row.deleteCell();
}

function CR2() {
  var row = document.getElementById("myRow2");

}

我的HTML：

<table id="myTable" class="auto-style1">
  <tr id="myRow1">
    <td onclick="DL1()"><img src="../../2.jpg" /></td>
    <td onclick="DL1()"><img src="../../1.gif" /></td>
    <td onclick="DL1()"><img src="../../3.png" /></td>
  </tr>
</table>

<table id="my2Table">
  <tr id="myRow2"></tr>

</table>

Answer 1

var table1=document.getElementById("myTable");
var table2=document.getElementById("myTable2");

function DL1(elem){

var row = document.getElementById("myRow1");
for(i=0;i<row.children.length;i++) {
if(row.children[i]==elem) {
row.deleteCell(i);
row2=document.getElementById("myRow2");
row2.appendChild(elem);
}
}
}

<td onclick="DL1(this)"><img src="http://placehold.it/100x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/150x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/200x100"/></td>

演示： https : //jsfiddle.net/Lt2cyw0g/2/

因此，您需要獲取clicked元素的索引（將其傳遞給函數，並檢查索引，然后在deleteCell（）函數中使用它），然后將元素添加到第二個表行中...

Answer 2

只需將clicked元素傳遞給函數即可：

 var table1 = document.getElementById("myTable"); var table2 = document.getElementById("myTable2"); function DL1(td) { td.parentNode.removeChild(td); } function CR2() { var row = document.getElementById("myRow2"); } 

 <table id="myTable" class="auto-style1"> <tr id="myRow1"> <td onclick="DL1(this)"> <img src="../../2.jpg" /> </td> <td onclick="DL1(this)"> <img src="../../1.gif" /> </td> <td onclick="DL1(this)"> <img src="../../3.png" /> </td> </tr> </table> <table id="my2Table"> <tr id="myRow2"></tr> </table> 

Answer 3

希望對您有所幫助，不需要ID：

 var a = document.querySelectorAll("table tr"); for(var b in a){ var c = a[b]; if(typeof c == "object"){ c.onclick = function (){ this.offsetParent.deleteRow(this.rowIndex); } } } 

 <table > <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1a</td><td>2a</td><td>3a</td></tr> <tr><td>1b</td><td>2b</td><td>b</td></tr> </table> <table> <tr><td>a</td><td>aa</td><td>aa</td></tr> <tr><td>b</td><td>bb</td><td>bb</td></tr> <tr><td>c</td><td>cc</td><td>cc</td></tr> </table>