时间戳

首页 > 解决方案 > 从 onclick 函数中获取按钮的 ID

javascript - 从 onclick 函数中获取按钮的 ID

问题描述

目前，我的应用程序中的表格的每一列都有排序按钮，当我单击其中一个排序按钮时，我希望将该按钮的 ID 传递到函数中，以便对正确的列进行排序。在我的 HTML 中，我只是有一个这样的表格......

<table id="table"></table>

然后我有一些函数用数据库中所有需要的行填充表。对于创建标题行的函数，它还将在该行中每个单元格的末尾附加一个排序按钮。我通过以下方法创建排序按钮...

const createSortBtn = item => {
    let btn = document.createElement("button");
    btn.innerHTML = '&#9660;';
    btn.id = item;
    btn.addEventListener("click", sortTable);
    return btn;
}

变量 item 是我希望为正在创建的按钮提供的 ID，innerHTML 只是一个向下的三角形，然后我还添加了 onclick 函数。这个 onclick 功能就是这样......

const sortTable = () => {
    let order, index = this.id;
    if (document.getElementById(index).innerHTML === '&#9660;') order = "ASC";
    else order = "DESC";
    window.sessionStorage.setItem("order", order);
    window.sessionStorage.setItem("index", index);
    makeSearch();
}

除了 this.id 部分之外，大多数功能与我的问题不太相关。从到目前为止我能够找到的内容来看，这似乎是获取 onclick 按钮 ID 的主要方法（即使在严格模式下，如果我认为是真的）。但是，当它在函数中被调用时，它是未定义的。

我一直在想，也许我可以更改代码，当我将 onclick 函数添加到排序按钮时，它会像这样......

const createSortBtn = item => {
    let btn = document.createElement("button");
    btn.innerHTML = '&#9660;';
    btn.id = item;
    btn.addEventListener("click", sortTable(item));
    return btn;
}

...但这似乎立即调用该函数，这不是我想要的行为。

我已经看到 jQuery 似乎有很多方法可以做到这一点，但如果可能的话，我希望坚持使用原生 JavaScript。感谢所有帮助。

标签： javascripthtml

解决方案

推荐阅读