如何在Ajax POST中获取表格行数据并实现企业支付更新
解决点击支付按钮时获取对应行企业名称和旧汇款金额的问题
我来帮你搞定这个问题!你现在卡壳的核心原因是没有把每行的企业名称和旧汇款金额绑定到对应的支付按钮上,导致点击时JS拿不到这些动态数据。下面是一步步的解决方法:
步骤1:在表格中给支付按钮绑定所需数据
你需要在生成表格的时候,把对应行的category(企业名称)和remitted(旧汇款金额)通过HTML的data属性绑定到支付按钮上。这样客户端JS就能直接读取这些值,不用再混写PHP代码。
修改你的表格代码里的支付按钮部分:
<button id='<?php echo $rs->catid; ?>' class="btn btn-info btnremit" data-category="<?php echo $rs->category; ?>" data-old-remit="<?php echo $rs->remitted; ?>"> <span class="glyphicon glyphicon-eye-open" style="color:#ffffff" data-toggle="tooltip" title="Pay Company"></span> </button>
步骤2:修改Ajax代码,动态获取绑定的数据
现在点击按钮时,你可以用jQuery的data()方法直接读取按钮上的data属性值,不用再在Ajax的data参数里写PHP代码(原来的写法是错误的,因为PHP在页面加载时就执行了,无法动态获取点击行的数据)。
修改后的Ajax代码:
<script> $(document).ready(function() { $('.btnremit').click(function() { var $btn = $(this); // 缓存当前按钮对象,避免重复DOM查询 var id = $btn.attr("id"); // 从data属性里直接拿企业名称和旧汇款金额 var companyName = $btn.data('category'); var oldRemit = $btn.data('old-remit'); swal("Enter Amount:", { buttons: true, closeModal: true, content: "input", }).then((amount) => { if (amount === "") { swal("Oops!! You need to enter value."); return false; } else { $.ajax({ type: 'POST', url: 'remit.php', data: { rid: id, pay: amount, currentDate: "<?php echo $savedate; ?>", // 全局日期可以保留 compnyName: companyName, old_remit: oldRemit }, success: function(data){ swal(`Paid: ${amount}`); // 可选:实时更新页面上的汇款金额,不用刷新整个页面 const newRemit = parseFloat(oldRemit) + parseFloat(amount); $btn.closest('tr').find('td:eq(3)').text(newRemit.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")); }, error: function(data){ swal(`Error remitting: ${amount}`); } }); } }); }); }); </script>
步骤3:修复remit.php中的SQL错误
注意你当前的INSERT语句有字段不匹配的问题:字段列表写了3个,但VALUES里却写了6个参数位置,这会导致执行失败。修改INSERT的SQL语句:
// 原来的错误SQL: // $sql='INSERT INTO `tbl_category_remits` ( `payment_date`, `category`, `remitted` ) VALUES ( :pay_date, :comp, :remit, :price, :cost, :current_times )'; // 修改为: $sql='INSERT INTO `tbl_category_remits` ( `payment_date`, `category`, `remitted` ) VALUES ( :pay_date, :comp, :remit )';
这样修改后,点击支付按钮时就能正确获取对应行的企业名称和旧汇款金额,顺利完成支付更新操作了。
内容的提问来源于stack exchange,提问作者Ambi
相关产品推荐
相关产品推荐

