求助:使用jQuery在blur事件中无法获取对应行的rojmel_id与weight值
解决Blur事件中获取当前行rojmel_id和weight的问题
看起来你遇到的核心问题是行元素选择器不匹配,以及没有正确获取当前输入框的weight值,我来帮你修正代码并解释原因:
问题分析
你的jQuery代码里用了$(thisObj).parents('.row')来查找当前行,但HTML中的<tr>并没有添加.row类,导致无法定位到目标行,自然获取不到rojmel_id的值;另外你也没有获取当前输入框的weight值,后端接口也拿不到这个关键参数。
修正后的代码
方案1:修正选择器并补充weight值获取(兼容你的内联事件写法)
<script type="text/javascript"> function getweight(thisObj) { // 用closest()查找最近的tr父元素,比parents()更高效精准 var row = $(thisObj).closest('tr'); // 简化值判断:如果val为空则取0 var rojmel_id = row.find('.rojmel_id').val() || 0; // 获取当前输入框的weight值 var weight = $(thisObj).val(); // 拼接包含两个参数的请求字符串 var dataString = "rojmel_id=" + rojmel_id + "&weight=" + weight; $.ajax({ type: "POST", url: "updateWt.php", data: dataString, success: function (data) { // 可以添加成功后的反馈,比如控制台打印或页面提示 console.log("更新成功,返回数据:", data); }, error: function(xhr, status, error) { // 增加错误处理,方便调试 console.error("请求失败:", error); } }); } </script>
HTML部分不需要修改,保持你的循环生成代码即可:
{section name=sec loop=$clientArray} <tr> <td>{$clientArray[sec].rojmel_date}</td> <td>{$clientArray[sec].party_name}</td> <td>{$clientArray[sec].item_nm}</td> <td>{$clientArray[sec].marko}</td> <td><input type="hidden" class="rojmel_id" name="rojmel_id" value="{$clientArray[sec].rojmel_id}"> <input type="text" name="weight" value="{$clientArray[sec].weight}" onblur="getweight(this);"></td> </tr> {/section}
方案2:推荐使用事件委托(更现代的写法,去掉内联事件)
如果你不想用内联onblur,可以用事件委托的方式绑定事件,代码更整洁:
<script type="text/javascript"> $(function() { // 给所有name为weight的输入框绑定blur事件 $(document).on('blur', 'input[name="weight"]', function() { var row = $(this).closest('tr'); var rojmel_id = row.find('.rojmel_id').val() || 0; var weight = $(this).val(); $.ajax({ type: "POST", url: "updateWt.php", data: { rojmel_id: rojmel_id, weight: weight }, // 用对象传参比拼接字符串更直观,jQuery会自动处理编码 success: function (data) { console.log("更新成功:", data); }, error: function(xhr, status, error) { console.error("请求出错:", error); } }); }); }); </script>
此时HTML里的输入框可以去掉onblur属性:
<input type="text" name="weight" value="{$clientArray[sec].weight}">
关键改进点
- 把
parents('.row')改成closest('tr'),直接定位到当前行的<tr>元素(因为你的HTML里行是<tr>而非带.row类的元素) - 新增获取当前输入框的
weight值,并把它加入请求参数 - 增加了错误处理函数,方便调试请求失败的情况
- 方案2中用对象传递请求参数,避免字符串拼接的编码问题
内容的提问来源于stack exchange,提问作者Prashant OmVir
相关产品推荐
相关产品推荐

