JQuery - 获取单选按钮旁边的 td 值

Question

我有以下困境： 我的 HTML 是这样的（这存在于 PL/SQL 应用程序中。）：

<table id="search_result_table">
<tr>

<input type=radio name="pv_select" value="'||lv_spriden_id||'"/>
<font face="Calibri" size=3><td id="spriden_id"     name="spriden_id">'||lv_spriden_id||'</td></font>'
<font face="Calibri" size=3><td id="last_name" class="c_last_name"     name="last_name">'||lv_spriden_last_name||'</td></font>
<font face="Calibri" size=3><td id="first_name" class = "c_first_name"     name="first_name">'||lv_spriden_first_name||'</td></font>
</tr>
</table>

我可以通过以下方式获取选定的单选按钮值：

$("input[name=pv_select]:checked").val()

但是，我希望能够获取“last_name”列单元格的值（它存在于单选按钮旁边的表中）。如何通过 jQuery 检索该值（通过单选按钮获取所选行）？

我已经尝试了几件事，但没有一个起作用：

$("input[name=pv_select]:checked").parent().siblings("td:eq(1)").text());    

提前致谢。

Answer 1

HTML 无效；不确定这是否会弄乱你的 DOM 树，从而在 jQuery 试图遍历损坏的 DOM 树时让 jQuery 感到困惑。

这是有效的 HTML：

<table id="search_result_table">
    <tr>
        <td>
            <input type=radio name="pv_select" value="'||lv_spriden_id||'"/>
        </td>
        <td id="spriden_id" name="spriden_id"><font face="Calibri" size=3>'||lv_spriden_id||'</font></td>
        <td id="last_name" class="c_last_name" name="last_name"><font face="Calibri" size=3>'||lv_spriden_last_name||'</font></td>
        <td id="first_name" class = "c_first_name" name="first_name"><font face="Calibri" size=3>'||lv_spriden_first_name||'</font></td>
    </tr>
</table>

和 jQuery，用于获取与选中的单选按钮同一行中的“姓氏”表格单元格的值：（

$("input[name=pv_select]:checked").parent().siblings("td.c_last_name").text());

我说 HTML 是有效的：id 属性的值是指在 HTML 页面中是唯一的，因此如果有多行表单元格使用相同的 id 属性，这也是无效的。）

Answer 2

我刚刚意识到这在 Firefox 中有效，但在 IE 中无效。因此，我将分析可能导致在一种浏览器中失败的原因，而不是在另一种浏览器中。

Answer 3

您的选择器适用于一个通用表，其中 td 中有一个输入，而另一个 td 中有姓氏文本，

也许您的问题是姓氏是在之后声明的提交，所以你应该尝试修改选择器，其中

$("input[name=pv_select]:checked").parent().siblings("td:eq(0)").text();

我刚刚更改了兄弟的索引（如果我正确地获取了你的表转储，你的 .siblings("td:eq(1)") 是名字，eq( 0) 应该是姓氏)

只是一个建议..

编辑

当您发布 html 摘录时，我意识到，您不需要检查无线电父级的同级元素。因为它的父级是 tr 并且表中 tr 的同级只是另一个表行。

您可能会考虑使用遍历函数 .next() ，它会移动到 DOM 中的下一个元素。

遗憾的是，我无法在 FF 中对此进行足够的测试（或者只是因为 Firebug / jquery ext.），但是这是您确切要求的代码（获取无线电输入的下一个元素）：

$('input[name="pv_select"]:checked').next();

唯一的问题是，下一个元素是 font 元素，我似乎无法在 FF 中正确渲染（并且不' t 驻留在表格行中 - 它直接显示在 FireBug 检查器中的 body 内），因此 .children() 无法找到 或您所在的任何 td试图找到