Question

我正在做一个大学项目。他们告诉我们制造2个阵列。第一个将有3个单元格，其中3个图像，第二个将为空，有1行。

我需要从第一张桌子上点击的单元格中删除图像并将其复制到第二张表格中！

我的问题是deleteCell()函数每次只会删除第一个元素。我不知道如何从表格行中删除 CLICKED 单元格！

我的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

只需将点击的元素传递给函数：

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>

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

3 个答案: