动态表格中实现行级独立的Ajax请求

本文旨在解决动态生成的HTML表格中，每个行都需要独立执行Ajax请求的问题。核心思路是利用jQuery的$(this).closest("tr").find(".sub-category-dropdown")方法，精确定位到当前行对应的子分类下拉框，从而确保每个行的Ajax请求只更新该行内的元素，避免数据混乱。

实现行级独立的Ajax请求

在动态生成的HTML表格中，如果每个行都需要根据用户的选择独立执行Ajax请求，直接使用类选择器可能会导致所有行的内容都被同时更新。为了解决这个问题，我们需要精确定位到当前行对应的元素，并只更新该行内的内容。

关键代码解析

核心在于修改JavaScript代码，使用$(this).closest("tr").find(".sub-category-dropdown")来定位到当前行对应的子分类下拉框。

• $(this): 在.category-dropdown的change事件处理函数中，$(this)指向触发该事件的.category-dropdown元素，即当前被选中的分类下拉框。
• .closest("tr"): 从当前元素开始，向上查找最近的父元素，即当前行。
• .find(".sub-category-dropdown"): 在当前行内，查找类名为.sub-category-dropdown的元素，即当前行对应的子分类下拉框。

修改后的JavaScript代码

$(document).ready(function() {
    $('.category-dropdown').on('change', function() {
        var category_id = this.value;
        // 找到当前行对应的子分类下拉框
        const subSelect = $(this).closest("tr").find(".sub-category-dropdown");

        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            },
            cache: false,
            success: function(result) {
                // 只更新当前行对应的子分类下拉框
                subSelect.html(result);
            }
        });
    });
});

登录后复制

完整示例

假设有如下HTML结构（PHP代码用于动态生成分类选项）：


Motiff
Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”
148
查看详情

<table class="center" id="Cateogry">
    <tr>
        <th>Category</th>
        <th>Item</th>
    </tr>
    <tr>
        <td>
            <div class="form-group">
                <label for="CATEGORY-DROPDOWN">Category</label>
                <select class="form-control category-dropdown">
                    <option value="">Select Category</option>
                    <?php
                    require_once "../config.php";
                    $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18");
                    while($row = mysqli_fetch_array($result)) {
                    ?>
                    <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option>
                    <?php
                    }
                    ?>
                </select>
            </div>
        </td>
        <td style="width:30%">
            <div class="form-group">
                <label for="SUBCATEGORY">Sub Category</label>
                <select class="form-control sub-category-dropdown">
                </select>
            </div>
        </td>
    </tr>

    <tr>
        <th>Category</th>
        <th>Item</th>
    </tr>
    <tr>
        <td>
            <div class="form-group">
                <label for="CATEGORY-DROPDOWN">Category</label>
                <select class="form-control category-dropdown">
                    <option value="">Select Category</option>
                    <?php
                    require_once "../config.php";
                    $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18");
                    while($row = mysqli_fetch_array($result)) {
                    ?>
                    <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option>
                    <?php
                    }
                    ?>
                </select>
            </div>
        </td>
        <td style="width:30%">
            <div class="form-group">
                <label for="SUBCATEGORY">Sub Category</label>
                <select class="form-control sub-category-dropdown">
                </select>
            </div>
        </td>
    </tr>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.category-dropdown').on('change', function() {
            var category_id = this.value;
            // 找到当前行对应的子分类下拉框
            const subSelect = $(this).closest("tr").find(".sub-category-dropdown");

            $.ajax({
                url: "fetch-subcategory-by-category.php",
                type: "POST",
                data: {
                    category_id: category_id
                },
                cache: false,
                success: function(result) {
                    // 只更新当前行对应的子分类下拉框
                    subSelect.html(result);
                }
            });
        });
    });
</script>

登录后复制

fetch-subcategory-by-category.php (示例):

<?php
    require_once "../config.php"; // 假设包含数据库连接信息

    $category_id = $_POST['category_id'];

    $result = mysqli_query($con,"SELECT * FROM menu_subcategory where category_id = $category_id");

    $options = "<option value=''>Select Sub Category</option>";
    while($row = mysqli_fetch_array($result)) {
        $options .= "<option value='".$row['subcategory_id']."'>".$row["subcategory_name"]."</option>";
    }

    echo $options;
?>

登录后复制

注意事项

• 确保jQuery库已正确引入。
• fetch-subcategory-by-category.php 脚本需要根据category_id返回相应的子分类选项。
• 如果表格是动态添加行，需要确保事件绑定在动态添加的元素上也生效。可以使用事件委托，将事件绑定到静态父元素上，例如：$(document).on('change', '.category-dropdown', function() { ... });

总结

通过使用$(this).closest("tr").find(".sub-category-dropdown")，我们可以精确地定位到当前行对应的子分类下拉框，从而实现行级独立的Ajax请求，避免数据混乱，提升用户体验。 这种方法也适用于其他需要在动态表格中实现行级操作的场景。

以上就是动态表格中实现行级独立的Ajax请求的详细内容，更多请关注php中文网其它相关文章！