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