如何使可点击的表格行与 HTMX 一起使用？

问题描述 投票：0回答：1

我有一个表格，其中每一行都有一个复选框。我添加了一个简单的 JQuery 函数，使整行都可单击 - 当用户单击该行中的任意位置时，它会切换复选框。

我希望能够在 htmx 中使用这些复选框，但它似乎不起作用。单击复选框本身时，HTMX 网络调用似乎会触发并正常运行，但单击行中的其他位置不会触发 API 调用或 HTML 替换。有没有办法让 HTMX 在单击行中的任意位置时工作？

我所看到的问题的最小可重现示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
        <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js "></script>
    </head>
    <body>
        <table class="table table-sm table-hover">
            <thead>
                <tr>
                    <th style="width: 30px"></th>
                    <th>Item</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr class="clickable">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-1"
                            hx-get="/api/test"
                            hx-target="#target"
                        />
                    </td>
                    <td>Widget</td>
                    <td>$10</td>
                </tr>
                <tr class="clickable">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-2"
                            hx-get="/api/test"
                            hx-target="#target"
                        />
                    </td>
                    <td>Big Widget</td>
                    <td>$15</td>
                </tr>
                <tr class="clickable">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-3"
                            hx-get="/api/test"
                            hx-target="#target"
                        />
                    </td>
                    <td>Heavy Widget</td>
                    <td>$12</td>
                </tr>
            </tbody>
        </table>
        <div id="target"></div>
        <script>
            $(document).ready(function () {
                $("tr.clickable").on("click", function () {
                    var $checkbox = $(this).find("input:checkbox");
                    $checkbox.prop("checked", !$checkbox.prop("checked"));
                });
                $("tr.clickable > td > input:checkbox").on(
                    "click",
                    function (event) {
                        event.stopPropagation();
                    }
                );
            });
        </script>
    </body>
</html>
javascript html jquery htmx
1个回答
0
投票

您可以将 hx-get 和 hx-target 移动到 

tr
元素，以便该行中的所有子元素都将开始进行 api 调用，因为 HTMX 支持继承。 然后定义一个函数，在单击行或复选框时选中和取消选中复选框。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
        <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js "></script>
    </head>
    <body>
        <table class="table table-sm table-hover">
            <thead>
                <tr>
                    <th style="width: 30px"></th>
                    <th>Item</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr class="clickable" hx-get="/api/test" hx-target="#target">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-1"
                        />
                    </td>
                    <td>Widget</td>
                    <td>$10</td>
                </tr>
                <tr class="clickable" hx-get="/api/test" hx-target="#target">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-2"
                        />
                    </td>
                    <td>Big Widget</td>
                    <td>$15</td>
                </tr>
                <tr class="clickable" hx-get="/api/test" hx-target="#target">
                    <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="item-3"
                        />
                    </td>
                    <td>Heavy Widget</td>
                    <td>$12</td>
                </tr>
            </tbody>
        </table>
        <div id="target"></div>
        <script>
            $(document).ready(function () {
                $("tr.clickable").on("click", function () {
                    var $checkbox = $(this).find("input:checkbox");
                    $checkbox.prop("checked", !$checkbox.prop("checked"));
                });
                $(".form-check-input").on("click", function () {
                    var $checkbox = $(this).find("input:checkbox");
                    $(this).prop("checked", !$(this).prop("checked"));
                });
            });
        </script>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.