我可以从每个按钮获取索引吗？

如何解决我可以从每个按钮获取索引吗？

for(idx in addList)
        {
            row += '<tr>';
            row += '<td>'+addList[idx].name+'</td>';
            row += '<td>'+addList[idx].id+'</td>';
            row += '<td><a class="btn btn-danger" value="idx" href="javascript:deleteFromAddList(addList[idx].id)"><i class="glyphicon glyphicon-trash icon-white"></i> {=getLocaleString("delete")}</a></td>';
            row += '</tr>';
        }
        $('#addListRow').empty();
        $('#addListRow').append(row);

我想知道如何从每个按钮中获取 idx？

像这样。 idx 只是增加了 ex)0,1,2,3,4,5,6,7,8,9......

但是当我点击 0 idx 按钮时我想选择 idx=0

解决方法

通过构建字符串来生成 HTML 是一个坏主意，并且不允许您根据要求灵活处理。

相反，创建真正的 HTML 元素并将属性附加到它们。

我不使用 jQuery，所以我将包含一个使用标准 JavaScript 的示例。

（重要提示：请注意，我使用 let 作为 i 的值。使用 var 将不起作用。）

const btn_home = document.querySelector("#button-home");

for (let i = 0; i < 10; i++) {
  const label = document.createTextNode(`I am ${i}`);
  const btn = document.createElement("button");
  btn.appendChild(label);

  btn.addEventListener("click",(event) => {
    alert(`This is ${i}`);
  });

  btn_home.appendChild(btn);
}

<div id="button-home"></div>

,

首先我会回答您实际提出的问题，然后提出我认为更好的方法。

您可以在处理程序字符串中使用字符串连接：

for (idx in addList) // <=== This is suspect,see below
{
    row += '<tr>';
    row += '<td>'+addList[idx].name+'</td>';
    row += '<td>'+addList[idx].id+'</td>';
    row += '<td><a class="btn btn-danger" href="javascript:deleteFromAddList(addList[' + idx + '].id)"><i class="glyphicon glyphicon-trash icon-white"></i> {=getLocaleString("delete")}</a></td>';
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^
    row += '</tr>';
}
$('#addListRow').empty();
$('#addListRow').append(row);

虽然如果这样做，我只会提供 id 除非您认为它可能会在呈现和点击之间发生变化（这适用于数字 ID，您的代码似乎期望他们是）：

for (idx in addList) // <=== This is suspect,see below
{
    row += '<tr>';
    row += '<td>'+addList[idx].name+'</td>';
    row += '<td>'+addList[idx].id+'</td>';
    row += '<td><a class="btn btn-danger" href="javascript:deleteFromAddList(' + addList[idx].id + ')"><i class="glyphicon glyphicon-trash icon-white"></i> {=getLocaleString("delete")}</a></td>';
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^
    row += '</tr>';
}
$('#addListRow').empty();
$('#addListRow').append(row);

相反，不过，我会使用事件委托，因此您根本不需要连接处理程序。出于视觉目的，href 可能是 #delete-${id} 或类似的：

for (idx in addList) // <=== This is suspect,see below
{
    row += '<tr>';
    row += '<td>'+addList[idx].name+'</td>';
    row += '<td>'+addList[idx].id+'</td>';
    row += '<td><a class="btn btn-danger" data-id="' + addList[idx].id + '" href="#delete-' + addList[idx].id + '"><i class="glyphicon glyphicon-trash icon-white"></i> {=getLocaleString("delete")}</a></td>';
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    row += '</tr>';
}
$('#addListRow').empty();
$('#addListRow').append(row);

您将一次连接您的事件处理程序，如下所示：

$('#addListRow').on("click",".btn.btn-danger",function(e) {
    e.preventDefault();
    deleteFroAddList($(this).attr("data-id"));
});

实时示例（还有各种其他更新——使用数组方法循环数组、模板文字、删除被点击按钮的 tr 等）：

function deleteFromAddList(id) {
    id = Number(id);
    console.log(`Deleting ID ${id}`);
    addList = addList.filter(entry => entry.id !== id);
    console.log(`New list:`);
    console.log(addList);
}
$('#addListRow').on("click",function(e) {
    e.preventDefault();
    deleteFromAddList($(this).attr("data-id"));
    $(this).closest("tr").remove(); // <== To remove the `tr`
});

let addList = [
    {name: "First",id: 1},{name: "Second",id: 2},{name: "Third",id: 3},{name: "Fourth",id: 4},{name: "Fifth",id: 5},];
let row = "<table><tbody>" +
    addList.map(entry =>
        `<tr>
            <td>${entry.name}</td>
            <td>${entry.id}</td>
            <td><a class="btn btn-danger" data-id="${entry.id}" href="#delete-${entry.id}"><i class="glyphicon glyphicon-trash icon-white"></i> delete</a></td>
        </tr>`
    ).join("") +
    "</tbody></table>";
$('#addListRow').html(row); // This does .empty() + .append()

<div id="addListRow"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

关于 for (idx in addList)：如果 addList 是一个数组，我建议使用 https://bootify.io 而不是 for-in，后者用于枚举对象属性。