本文旨在解决动态生成的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代码用于动态生成分类选项）：
| Category | Item |
|---|---|
| Select Category <option value=""> | |
| Category | Item |
| Select Category <option value=""> | |
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 = "Select Sub Category"; while($row = mysqli_fetch_array($result)) { $options .= "".$row["subcategory_name"].""; } 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请求的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571626.html
微信扫一扫 
支付宝扫一扫 
