通过在同一div中按c键动态选择元素

Question

我正在尝试创建一个脚本，以在具有特定html内容的表中添加另一行。 问题是我想在一个相当长的形式的每个部分使用相同的脚本。 选择表ID而不必使用确切的表名称似乎正在逃避我。

这里的要点是只需点击“添加”按钮，它将添加该按钮所在的任何部分的附加项目。但在我可以添加之前，我需要能够选择正确的项目（表格ID）实际上使用“getElementById”。

我已经仔细寻找答案，并且仍然是网络javascripting的新手，我猜我只是不理解某些东西或尝试错误的方法...任何帮助将不胜感激。

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
}

Answer 1

有两个问题需要修复：

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

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

HTML

<div id="div1">
  <table id="ans"></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演示

Answer 2

你有没有试过jQuery？ 它有一些很好的方法，使生活更轻松。 您可能希望选择.closest（），它根据您当前的上下文选择一个元素。 而且，不再需要使用笨拙的getElementById ......

Answer 3

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

Answer 4

在这种情况下，您要查找兄弟表元素; 你可以使用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);
  }
}