通过在td:Pure JavaScript中单击获取表ID

Question

我正在编写一个程序,它将生成一组HTML表,每个表都有一个(显然)唯一ID.每个表中的某些单元格具有onClick处理程序(并且每个单元格还具有唯一的ID).我希望能够在单击一个单元格时获取表格id,以将其用作我正在调用onClick的函数中的参数.

这个问题之前已经被问过(并已经回答过)专门用于JQuery,但我更喜欢用纯JavaScript做.我认为它一定是可能的,但是怎么样？

Answer 1

请尝试以下方法:

var tds = document.getElementsByTagName("td");

var getParentTableID = function() {
    var el = this;
    while ((el = el.parentElement) && el.nodeName.toUpperCase() !== 'TABLE');
    console.log(el.id);//Table id
};

for(var i = 0; i < tds.length; i++) {
  tds[i].onclick = getParentTableID;
};

<h4>Table1</h4>
<table id="tableID_1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td id="b3">6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<h4>Table2</h4>
<table id="tableID_2">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td id="b3">6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>