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>