javascript - 如何检查单元格是否已填充？JS

Question

我有一个包含两个单元格的简单表格。我将 w3 学校代码(用于拖放)更改为一个图像，当拖到第二个图像上时，占据第二个图像位置并且第二个图像消失。但是当单元格中没有图像时，问题就来了，然后单元格就消失了。如何查看cell中是否有图像？

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var el = ev.target.parentNode;
    ev.target.appendChild(document.getElementById(data));
    el.appendChild(document.getElementById(data).cloneNode(true));
    var x = el.classList.contains('dropzone');
    if (!x) {
    ev.target.remove();
  }
}

th, td{
  border: solid black;
  width: 100px;
  height: 100px;
  padding: 0px;
}
table{
 width:  300px;
  }
img{
  width: 100px;
}

<table>
  <tr>
   <td ondrop="drop(event)" ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="a8" src="http://images5.fanpop.com/image/photos/27700000/desert-windows-7-vista-and-xp-picks-27752343-500-375.jpg"></td>
    <td ondrop="drop(event)" ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="b8" src="http://images5.fanpop.com/image/photos/27700000/jellyfish-windows-7-vista-and-xp-picks-27753183-500-375.jpg"></td>
  </tr>
</table>

Answer 1

您可以遍历 td 元素并在您的 javascript 代码中添加 ondrop 事件，因此您可以知道哪个元素触发了该事件。

然后检查这个元素里面是否有子元素。
如果不是 => 不执行操作(里面没有图像元素)，else => 执行操作(里面有图像元素)。

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

var td=document.getElementsByTagName("td");
for(var i=0; i < td.length;i++){   //bind ondrop event to all td, so it will be easier to get the element which fired the event
  td[i].ondrop=function(ev){ 
     ev.preventDefault();
     if (this.hasChildNodes()) {  //check if got children nodes (if got img inside)
    var data = ev.dataTransfer.getData("text");
    var el = ev.target.parentNode;
    ev.target.appendChild(document.getElementById(data));
    el.appendChild(document.getElementById(data).cloneNode(true));
    var x = el.classList.contains('dropzone');
    if (!x) {
    ev.target.remove();
  }
  }
    
  
  }
}

th, td{
  border: solid black;
  width: 100px;
  height: 100px;
  padding: 0px;
}
table{
 width:  300px;
  }
img{
  width: 100px;
}

<table>
  <tr>
   <td ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="a8" src="http://images5.fanpop.com/image/photos/27700000/desert-windows-7-vista-and-xp-picks-27752343-500-375.jpg"></td>
    <td ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="b8" src="http://images5.fanpop.com/image/photos/27700000/jellyfish-windows-7-vista-and-xp-picks-27753183-500-375.jpg"></td>
  </tr>
</table>

有关如何检查元素是否有子元素的更多详细信息，请查看答案 here