jquery - 在多个表行中重复使用下拉菜单

Question

我有一个交易表，我想在每一行添加一个小按钮。单击时，应出现一个带有两个菜单项的小下拉菜单，如下所示:

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Pay</a></li>
    <li><a tabindex="-1" href="#">Delete</a></li>
</ul>

但是，我的表格可能有零行到数百行，因此重复代码，加上必须创建下拉列表的按钮，将会增加大量页面大小。

有没有办法让该代码一次，并且以某种方式通过单击按钮，使用每一行中的相同代码？此外，我需要根据每行的 ID 更改该行的 href 值。所以 href 实际上会是这样的:

\transaction\pay?id=10

每行的 ID 都会发生变化。

Answer 1

向您的行添加一个按钮，如下所示:

<td class="dropdown">
    <a class="btn btn-default actionButton" data-toggle="dropdown" href="#">
        Action
    </a>
</td>

下拉菜单仅在位于打开它的data-toggle之后时才会自动定位。为了避免编写大量定位代码，您可以在打开下拉菜单之前移动它:

//save the selector so you don't have to do the lookup everytime
$dropdown = $("#contextMenu");

$(".actionButton").click(function() {
    //get row ID
    var id = $(this).closest("tr").children().first().html();

    //move dropdown menu
    $(this).after($dropdown);

    //update links
    $dropdown.find(".payLink").attr("href", "/transaction/pay?id="+id);
    $dropdown.find(".delLink").attr("href", "/transaction/delete?id="+id);

    //show dropdown
    $(this).dropdown();
});

Demo in jsFiddle