Can I get index from each button?

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);

I want to know how I can get idx from each button?

Like this. idx just increased ex)0,1,2,3,4,5,6,7,8,9......

But I want to choose idx=0 when I clicked 0 idx button

Answer 1

Generating HTML by building strings is a bad idea and doesn't allow the flexibility for what you are asking to do.

Rather, create real HTML elements and attach properties to them.

I don't use jQuery, so I'll include an example using standard JavaScript.

(Important note: Notice that I am using let for the value of i. Using var will not work.)

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>

Answer 2

First I'll answer what you actually asked, then suggest what I believe to be a better approach.

You can use string concatenation in your handler string:

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);

Although if doing it that way, I'd just provide the id unless you think it may change between when this is rendered and when the click occurs (this works for numeric IDs, which your code seemed to expect them to be):

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);

Instead, though, I'd use event delegation so you didn't hook up a handler at all. Perhaps the href could be #delete-${id} or similar for visual purposes:

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);

You'd hook up your event handler once, like this:

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

Live Example (with various other updates — looping the array using an array method, template literals, removing the tr for the clicked button, etc.):

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>

---

About for (idx in addList): If addList is an array, I suggest using one of the array iteration methods rather than for-in, which is for enumerating object properties.