Javascript：单击时删除特定的表格单元格

Question

I was working on a university project. They told us to make 2 arrays. The first will have 3 cells with 3 images, and the second will be empty with 1 row.

I need to remove the image from the cell clicked each time in the first table and copy it to the second table!

My problem is that deleteCell() function will only delete the first element each time. I don't know how to delete the CLICKED cells from my table row!

My 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");

}

My 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>

Demo: https://jsfiddle.net/Lt2cyw0g/2/

So, you need to get index of clicked element (pass it to the function, and check index, and use it in deleteCell() function), then add element to the second table row...

Answer 2

Just pass clicked element to the function:

 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

Hope it helps, no need 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>