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

有两个问题需要解决：

根据您的实现，x是父div（字符串值）的id，您不能在其上调用'getElementsByTageName（'table'）。你应该得到元素参考
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 demo

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);
  }
}

通过单击同一div中的按钮动态选择元素

4 个答案: