如何正确 select 表格单元格内的 div

Question

我创建了一个 function 根据用户的请求插入表格行和数据。 我被要求在表格单元格的右上角添加一个红色小方块 ( div )，单击它会删除表格行。

到目前为止，我已经编写了一个删除表格行的 function，但问题是 - 它只需要在单击红色小div时完成，而不是在单击表格单元格时完成。 这怎么可能实现？ 我已经尝试了几种解决div的方法，但到目前为止都没有奏效。

非常感谢您的帮助。

<button class="btn" onclick="createNewTableElement()">Add</button>
<input id="new-item" type="text" value="item">
<table id="main-table" onclick="deleteRow(obj)">

function createNewTableElement() {
  var inputField = document.getElementById("new-item");
  if (inputField.value == "") {
    return;
  }
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  var div = document.createElement("div");
  var cellText = document.createTextNode(inputField.value);
  cell.appendChild(div);
  cell.appendChild(cellText);
  row.appendChild(cell);

  obj = document.getElementById("main-table");
  obj.appendChild(row);
}

function deleteRow(e) {
  document.getElementById('main-table').deleteRow(e);
}

Answer 1

从表中删除 onclick：

  <button class="btn" onclick="createNewTableElement()">Add</button>
  <input id="new-item" type="text" value="item">
  <table id="main-table">

然后在同一个 function 中，您正在创建行，还创建红色 div 和事件：

  function createNewTableElement() {
      var inputField = document.getElementById("new-item");
      if (inputField.value == "") {
        return;
      }
      var row = document.createElement("tr");
      var cell = document.createElement("td");
      var div = document.createElement("div");

      div.addEventListener('click', function(event) {
         // the row call parent (table) and tell removes him self
         row.parentNode.removeChild(row); 
      });

      var cellText = document.createTextNode(inputField.value);
      cell.appendChild(div);
      cell.appendChild(cellText);

      row.appendChild(cell);

      obj = document.getElementById("main-table");
      obj.appendChild(row);
    }

Answer 2

我对您的代码进行了一些更改。 删除了绑定在表上的deleteRow并仅在div元素上添加事件，然后找到父行元素并将其从表中删除这对您有帮助吗？

 function createNewTableElement() { var inputField = document.getElementById("new-item"); if (inputField.value == "") { return; } var row = document.createElement("tr"); var cell = document.createElement("td"); var div = document.createElement("div"); div.onclick = deleteRow; var cellText = document.createTextNode(inputField.value); cell.appendChild(div); cell.appendChild(cellText); row.appendChild(cell); obj = document.getElementById("main-table"); obj.appendChild(row); } function deleteRow(e) { document.getElementById('main-table').removeChild(e.target.parentElement.parentElement); }

 #main-table div { height: 10px; width: 10px; border: 1px solid; display: inline-block; margin-right: 10px; }

 <button class="btn" onclick="createNewTableElement()">Add</button> <input id="new-item" type="text" value="item"> <table id="main-table">

Answer 3

我的方式..

 const mainTable = document.querySelector('#main-table tbody'), btAdd = document.getElementById('btn-Add'), newItem = document.getElementById('new-item'); newItem.oninput=()=> { btAdd.disabled = (newItem.value === '') } btAdd.onclick=()=> { let newCell = mainTable.insertRow().insertCell(); newCell.textContent = newItem.value newCell.appendChild( document.createElement('div')) newItem.value = '' btAdd.disabled = true } mainTable.onclick=e=> { if (.e.target.matches('td div')) return mainTable.deleteRow( e.target.closest('tr').rowIndex -1 ) }

 #main-table { border-collapse: collapse; margin: 1em; } #main-table thead { background-color: cadetblue; } #main-table th { padding: .7em; width:20em; } #main-table td { border: 1px solid grey; padding: .5em; } #main-table td div { display: block; float: right; width: 1em; height: 1em; background-color: crimson; cursor: pointer; } #main-table td div:hover { border: 1px solid blue; }

 <button id="btn-Add" disabled >Add</button> <input id="new-item" type="text" placeholder="item"> <table id="main-table"> <thead> <th>items list</th> </thead> <tbody> </tbody> </table>