javascript - 为什么我的 ChildNodes 在 JS 事件处理程序上返回未定义？

Question

我正在将点击处理程序添加到表元素之一中。我在检查 ->控制台上确认这是返回我需要的值，即地址值。

document.getElementById('donut-attributes').parentNode.childNodes[10].childNodes[1].childNodes[30].innerText 
//returns 123 Some Address on console log

这是主页上的完整脚本:

<script>
window.onload = function(){
  var donutContainer = document.getElementById("donut-attributes");
  donutContainer.addEventListener('click', function(e){
    alert(e.target.parentNode);
    address = e.target.parentNode.childNodes[10].childNodes[1].childNodes[30].innerText;
    alert("donut container after");
    });
  }
</script>

我设置了几个 alert() 以确保一切正常。当它归结为 alert(e.target.parentNode) 时，它会显示 [object HTMLTableRowElement]。然而，当它归结为 alert(e.target.parentNode.childNodes[10]); 时，它返回 undefined。

如何修复点击处理程序，以便当我点击任何表元素时，我将获得存储到 address 中的地址值？为什么它在控制台日志上显示地址，而当我将其与 clickhandler 一起使用时，它显示 未定义？

<小时/>

编辑:表格 html (index.html.erb) 看起来像这样:

  <table border=1 class="table table-condensed donut-attributes">
      <tbody class="table-hover">
          <tr>
            <td rowspan=5>
              Some_image
            </td>

              <tr>
                <td class="center" style="vertical-align: middle">Some_name</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle">Some_phone</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle">Some_rating</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle" id="address" >Some_address</td>
              </tr>

                        <tr>
            <td rowspan=5>
              Some_image2
            </td>

              <tr>
                <td class="center" style="vertical-align: middle">Some_name2</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle">Some_phone2</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle">Some_rating2</td>
              </tr>
              <tr>
                <td class="center" style="vertical-align: middle" id="address" >Some_address2</td>
              </tr>
          </tr>
      </tbody>

如何将鼠标悬停在表格行上的任何元素上，单击它并获取相应的地址？ (即，如果我将鼠标悬停并单击第二行中的第二行，则在第二行中的任何列上，我需要它返回 some_address2)

Answer 1

HTML 中不允许 id 属性的值重复，因此您应该使用 id="address" 从 td 中删除该属性>，因为它会重复。

要识别组中的“最后”行，您可以推断该行的行索引(从零开始)为 4，加上 5 的倍数。或者换句话说，它是 4 模 5。您知道所单击的行的行索引，因此找到具有此类索引的下一行并不难:

window.addEventListener('DOMContentLoaded', function(){
  var donutContainer = document.getElementById("donut-attributes");
  donutContainer.addEventListener('click', function(e){
    // Get the clicked element
    var el = e.target;
    // Find row that contains (or is) the clicked element
    while (el.tagName !== 'TR') {
        if (el === this) return; // give up
        el = el.parentNode;
    }
    // Get last row within group of rows
    el = this.rows[el.rowIndex - el.rowIndex % 5 + 4];
    // Get its text
    address = el.cells[0].textContent;
    alert(address);
  });
});

table, td {border: 1px solid}

<table id="donut-attributes" class="table table-condensed">
  <tbody class="table-hover">
    <tr>
        <td rowspan=5>[image 1]</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">name1</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">phone1</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">rating1</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">address1</td>
    </tr>
    <tr>
        <td rowspan=5>[image 2]</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">name2</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">phone2</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">rating2</td>
    </tr>
    <tr>
        <td class="center" style="vertical-align: middle">address2</td>
    </tr>
</table>

请注意，如果表格中有特殊标题行，或其他不遵循五倍数模式的行，则必须相应地调整公式。