Javascript jQuery中具有可切换行的表

我在我的电子商务网站上有一个订单列表表。我想通过单击每一行，显示另一行订单详细信息。 我不懂怎么写这个函数

下面是我如何编写表格行的：

$("#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");

    });
}

$orderdetail_ui+中的变量i不起作用。我怎么做？

---

谢谢大家。

无需将按钮i与订单详细信息i链接，您可以使用相对导航，在这种情况下，相对简单：

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

为了简化事件处理程序，我向每个按钮添加了togglebutton类，并在单个选择器中使用它

更新代码：

//设置一些示例数据

---

对于var i=1；iclickfunctioni{不是定义事件处理程序的方式。只需使用$this.closesttr.next即可。toggle@freedomn-m、 为什么不呢？click方法在这方面非常有用。Davide，你可以在这里添加数据变量，告诉我们发生了什么：@isherwood从未使用过那种重载，但它不是$button.clicki，functioni吗{..？我不懂。单参数处理函数实现可能是最常见的。它列在第一位：也称为DOM遍历。