Question

此页面上的每个表（大约有25个不同的表）都会有一次此按钮，我希望找到一种方法来使onclick事件调用函数{{1} }，并传入父表的constructDataValueString（这样就不必显式引用表ID）。

有没有一种写方法：

id

HTML标记的图形示例：

Answer 1

您可以使用closest()，例如：

onclick="constructDataValueString(this.closest('table').id)"

示例

const constructDataValueString = (id) => console.log("table id is: ", id);

<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructDataValueString(this.closest('table').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>

Answer 2

确定-使用this.parentNode.parentNode.parentNode.parentNode.id：

function constructDataValueString(id) {
  console.log(id);
}

<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="constructDataValueString(this.parentNode.parentNode.parentNode.parentNode.id)">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

（以上是一个简单的示例-它遵循完全相同的结构，只具有所需的必要元素和属性。

Answer 3

要确保内部table的结构可以更改而不影响这部分，可以使用this.closest("table")，以便获得第一个父元素<table>，并从中获取ID：

constructDataValueString(this.closest("table").id)

Answer 4

更灵活的解决方案

function parent(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="console.log(parent(event.target, '#populationbyage'))">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

Answer 5

如其他答案所建议，请使用closest（） https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

要回答您的问题并解决要发送特定元素的某人的问题，可以使用一种方法来准确发送表的ID或所需的任何标记。

`<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructs(this.closest('#populationbyage').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>
<script>
    function constructs(id) {
        console.log(id)     
    }
</script>
`

获取id方法将精确定位到您要在此处访问的表。如果将来希望添加一些嵌套表，它将帮助您忽略所有嵌套表。

如何在onclick事件中使用父表的ID作为参数？

5 个答案: