如何使用 Vanilla Javascript 在 DOM 中自动化点击功能

Question

我想有效地模拟按下 "delete" 按钮并删除元素。我可以用 "deleteRow" 做到这一点，但我想专门针对按钮 "delete" 在 DOM 中专门执行此操作。这是关于通过 DOM 实现印刷机自动化。 Table 示例来自 W3*.

HTML

 <table id="mytab1">
<tr>
   <td>Row 1</td>
   <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
   <td>Row 2</td>
   <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
   <td>Row 3</td>
   <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
  </table>

Javascript

for(var i = 0; i < 3; i++){
         var x = document.getElementById("mytab1").deleteRow('tr');

 }

提前致谢。

Answer 1

您的函数应该如下所示：

function deleteRow(self) {
    self.parentNode.parentNode.remove();
}

var buttons = document.querySelectorAll("#mytab1 input");
for (var i = 0; i <= buttons.length; i++) {
    buttons[i].click();
}

测试片段：

function deleteRow(self) {
  self.parentNode.parentNode.remove();
}

var buttons = document.querySelectorAll("#mytab1 input");
for (var i = 0; i < buttons.length; i++) {
  setTimeout(function(i) {
    buttons[i].click();
  }, 500 * i, i);
}

<table id="mytab1">
  <tr>
    <td>Row 1</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
</table>

Answer 2

当遍历元素时，您可以简单地使用 elements[i].click()，并使用 .deleteRow(row) 触发目标行的删除，其中 row 计算为索引（通过来自函数调用):

function deleteRow(row) {
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById("mytab1").deleteRow(i);
}
const elements = document.getElementsByTagName('td');

for (let i = 0; i < elements.length; i++) {
  elements[i].click();
}

<table id="mytab1">
  <tr>
    <td>Row 1</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
</table>

如何使用 Vanilla Javascript 在 DOM 中自动化点击功能

How to automate click functionality in the DOM with Vanilla Javascript

html

javascript

for-loop

button

dom-manipulation