动态表格中实现行级独立的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代码用于动态生成分类选项）：

<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请求，避免数据混乱，提升用户体验。 这种方法也适用于其他需要在动态表格中实现行级操作的场景。