我可以从每个按钮获得索引吗?

Question

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增加了前女友)0,1,2,3,4,5,6,7,8,9…

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

Answer 1

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

你可以在你的处理程序中使用字符串连接:

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", ".btn.btn-danger", 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是一个数组，我建议使用数组迭代方法之一，而不是for-in，这是用于枚举对象属性。

Answer 2

通过构建字符串来生成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>