Question

我试图在用户的点击中定位表格中的特定行。现在，我有以下代码：

function getRowIndex(x) {
    console.log("Row " + x.rowIndex + " was clicked.");
}

document.getElementsByTagName("tr").onclick = function () {
        getRowIndex(this);
};

什么都没发生。我已经和这个打了很多，甚至在这里和其他地方看到了一些似乎应该可以工作的东西，但要么我得到错误，因为它会触发onload而不是onclick，或者当我确定没有任何事情发生时。

最终，我尝试定位rowIndex以检索该行的ID，然后通过该ID检索一些JSON数据。

请不要jquery。谢谢你的帮助。

Answer 1

您需要将onclick事件添加到循环中的所有行，您无法使用getElements选择器进行分配：

var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
     rows[i].onclick = function () { getRowIndex(rows[i]); };
}

Answer 2

您的代码正在尝试在HTML集合上设置onclick。 DOM不会那样工作（jQuery确实如此，但你已经说过你并没有使用它）。 DOM非常面向元素，而不是基于集合。

您可以将事件挂钩到每一行，但相反，我会将其挂钩在table或tbody这些行所在的位置，因为点击会冒泡到它。然后，如果它出现在一行，我就会对点击采取行动：

document.querySelector("selector-for-the-table").addEventListener("click", function(e) {
    var element = e.target;
    while (element && element != this) {
        if (element.tagName === "TR") {
            getRowIndex(element);
            return;
        }
        element = element.parentNode;
    }
});

示例：

＆＃13;

function getRowIndex(element) {
    console.log("rowIndex = " + element.rowIndex);
}
document.querySelector("table").addEventListener("click", function(e) {
    var element = e.target;
    while (element && element != this) {
        if (element.tagName === "TR") {
            getRowIndex(element);
            return;
        }
        element = element.parentNode;
    }
});

＆＃13;

<table>
  <tbody>
    <tr>
      <td>Row 0</td>
    </tr>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

＆＃13;

在Javascript中定位rowIndex

2 个答案: