通过点击同一分区中的按钮来动态选择一个元素

Selecting an element dynamically by cicking button in same div

本文关键字：动态 选择 元素 一个 分区 按钮      更新时间：2023-09-26

我正在尝试创建一个脚本，以便在具有特定html内容的表中添加另一行。问题是，我想在一个相当长的表单的每一部分上使用相同的脚本。选择表id而不必使用确切的表名似乎让我很难理解。

这里的重点是只需点击"添加"按钮，它就会添加该按钮所在部分的额外项目。但在添加之前，我需要能够选择正确的项目（表id），而无需实际使用"getElementById"。

我一直在寻找答案，但我对web java脚本还是很陌生，我猜我只是不理解一些东西或尝试了错误的方法。。。任何协助都将不胜感激。

HTML

<div id="divOne">
    <table id="myTable">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
    </table>
    <br />
    <button onclick="myFunction()">Test ONE</button>
</div>
<br />
<div id="divTwo">
    <table id="testTable">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
    </table>
    <br />
    <button onclick="myFunction()">Test TWO</button>
</div>

jquery

function myFunction() {
    var x = event.currentTarget.parentNode.getAttribute('id');
    alert(x); //to test its grabbing correct div THIS ONE WORKS
    var child = x.getElementsByTagName('table').getAttribute('id');
    alert(child); //to test its grabbing correct THIS ONE DOESNT
}

有两个问题需要解决：

  1. 根据您的实现，x是父div的id（字符串值），您不能在其上调用'getElementsByTageName（'table'）。您应该获得元素引用

  2. getElementsByTagName（）将返回一个HTMLCollection，尝试如下访问它们：children[index]

HTML

<div id="div1">
  <table id="answers"></table>
  <button onClick="test(event)">test</button>
</div>

JS

function myFunction(e){
  var target = e.currentTarget.parentNode;
  //fetch id
  console.log(target.getAttribute("id"));
  //fetch table id
  console.log(target.getElementsByTagName("table")[0].getAttribute("id"));
}

这是jsfiddle演示

您已经尝试过jQuery了吗？它有一些让生活更轻松的好方法。您可能需要选择.closest（），它根据您当前的上下文选择一个元素。此外，不再需要使用尴尬的getElementById。。。

您的myFunction中有一个错误。这应该有助于：http://jsfiddle.net/2wA38/

在这种情况下，您需要查找同级表元素；您可以使用previousSibling导航DOM，直到到达元素：

function myFunction() {
  var node = event.currentTarget,
  x = node.parentNode.id;
  console.log(x);
  while (node && node.tagName != 'TABLE') {
    node = node.previousSibling;
  }
  if (node) {
    console.log(node.id);
  }
}
相关文章：