根据选中的单选按钮提取 html 表信息

发布于 2024-08-12 06:53:55 字数 646 浏览 5 评论 0原文

使用下面的示例,我可以使用什么选择器组合来获取包含“价格”的文本? (假设用户单击了单选按钮和提交按钮)

<table border="1" id="modal_table">
<tbody>
<tr>

<td> <input type="radio" name='sub' value="509"/> </td>
<td> 509 </td>
<td class='price'> Price is $99 </td>

</tr>
<tr>

<td> <input type="radio" value="510"/> </td>
<td> 510 </td>
<td id="price"> Price is $88 </td>

</tr>
</table>

<input type='button' id='idButton2' value="Submit">
  • 获取选中的单选按钮后面的 td 单元格的内容,或者
  • 获取选中的单选按钮后面的由 id=price 标识的 td 单元格的内容

Using the example below, what combination of selectors could I use to get the text that contains "price"? (Assume user has clicked a radio button and the Submit button)

<table border="1" id="modal_table">
<tbody>
<tr>

<td> <input type="radio" name='sub' value="509"/> </td>
<td> 509 </td>
<td class='price'> Price is $99 </td>

</tr>
<tr>

<td> <input type="radio" value="510"/> </td>
<td> 510 </td>
<td id="price"> Price is $88 </td>

</tr>
</table>

<input type='button' id='idButton2' value="Submit">
  • get content of td cell that follows the checked radio button, or
  • get content of td cell identified by id=price that follows the checked radio button

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

没有伤那来痛 2024-08-19 06:53:55
$('tr input[name=sub]:checked').parent().find('#price').html()
$('tr input[name=sub]:checked').parent().find('#price').html()
通知家属抬走 2024-08-19 06:53:55

很好的答案!我必须将 parent() 更改为 parents() 才能使其正常工作。这是代码:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myButton").click(function () {
            val1 = $("td input[name='sub']:checked").parents().find('.desc').html();
            val2 = $("td input[name='sub']:checked").parents().find('.price').html();
            if (val1 == null){
                alert("Please select one value above");
            } else {
                alert(val1 + " sells for " + val2);
            };
        });
    });
</script>
<table border=1>
    <tr>
        <td>Select</td><td>Product</td>
        <td>Description</td><td>Price</td>
    </tr>
    <tr>
        <td><input type='radio' name='sub' value='ABCDE'></td>
        <td>ABCDE</td>
        <td class='desc'>Product ABCDE</td>
        <td class='price'>55.95</td>
    </tr><tr>
        <td><input type='radio' name='sub' value='GHIFK' ></td>
        <td>GHIFK</td>
        <td class='desc'>Product GHIFK</td>
        <td class='price'>34.99</td>
    </tr>
</table>

<input type='button' id='myButton' value="Click Me">

Great answer! I had to change parent() to parents() to get it working. Here is the code:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myButton").click(function () {
            val1 = $("td input[name='sub']:checked").parents().find('.desc').html();
            val2 = $("td input[name='sub']:checked").parents().find('.price').html();
            if (val1 == null){
                alert("Please select one value above");
            } else {
                alert(val1 + " sells for " + val2);
            };
        });
    });
</script>
<table border=1>
    <tr>
        <td>Select</td><td>Product</td>
        <td>Description</td><td>Price</td>
    </tr>
    <tr>
        <td><input type='radio' name='sub' value='ABCDE'></td>
        <td>ABCDE</td>
        <td class='desc'>Product ABCDE</td>
        <td class='price'>55.95</td>
    </tr><tr>
        <td><input type='radio' name='sub' value='GHIFK' ></td>
        <td>GHIFK</td>
        <td class='desc'>Product GHIFK</td>
        <td class='price'>34.99</td>
    </tr>
</table>

<input type='button' id='myButton' value="Click Me">
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文