Таблица в jQuery с переключаемой строкой

Question

У меня есть таблица со списком заказов на моем сайте электронной коммерции. Я бы хотел, чтобы появилась другая строка с деталями заказа, нажав на каждую строку. Я не понимаю, как написать функцию.

Вот как я написал строку таблицы:

$("#tbody").append("<tr id='riga" + i + "'><th scope='row'>" + idordine 
    + "</th><td>" + data + "</td><td>" + prezzoTotale 
    + "€</td><td> <button id='button_" + i 
    + "')>Dettagli</button></tr><tr id='orderdetail_" + i 
    + "' style='display:none;'>"
    + "<th scope='row'> ciao </th><td>ciao2</td><td>ciao2</td><td>ciao2</td></tr>"
); 

и функцию, которую я написал:

for (var i = 0; i < ordini.length; i++) {
    $("#button_" + i).click(function(i) {
        $("#orderdetail_" + i).toggle("slow");

    });
}

переменная i в $("#orderdetail_"+i) не работает. Как я могу это сделать? Спасибо всем.

Answer 1

Нет необходимости связывать button_i с orderdetail_i, вы можете использовать относительную навигацию, в данном случае относительно простую:

$(this).closest("tr").next()

Чтобы упростить обработчик событий, я добавил класс togglebutton к каждомуКнопка и используется, что в одном селекторе.

Обновлен код:

// setup some example data
for (var i = 1;i<10; ++i) {
  $("tbody").append("<tr id='riga" + i + "'><th scope='row'>" + "idordine"
    + "</th><td>" + "data" + "</td><td>" + "prezzoTotale"
    + "€</td><td> <button class='togglebutton' id='button_" + i 
    + "')>Dettagli</button></tr><tr id='orderdetail_" + i 
    + "' style='display:none;'>"
    + "<th scope='row'> ciao </th><td>ciao" + i + "</td><td>ciao" + i + "</td><td>ciao" + i + "</td></tr>"
  ); 
}

// handle toggle
$("button.togglebutton").click(function() {
    $(this).closest("tr").next().toggle();
});

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