javascript - 抓取某个表格行

Question

我有一个每行有一个单选按钮的表格。

<table id="t1">
 <tr><td><input type="radio" onclick="grab_row()" value=1></td><td>Data1<td>Data11</td></tr>
 <tr><td><input type="radio" onclick="grab_row()" value=2></td><td>Data2<td>Data22</td></tr></table>

我想要一个函数来获取通过无线电选择的行的值。

我的功能：

function grab_row () {
    var radio = $("input[name=t1]:checked").val();   
}

该函数仅获取当前选择的无线电 id。

例如，如果单击第一个单选，则返回 Data1 和 Data11。谢谢

Answer 1

当你使用.val()返回多个元素的选择器时，它只会返回第一个元素的值。相反，您需要使用.each().

var values = [];
$("input[name=t1]:checked").each(function(idx, val) {
   //spin through and collect each val
   values.push($(val).val());
})
console.log(values); //view values in console

Answer 2

这是我对您正在寻找的内容的解释

html

<table>
<tr>
    <td>
        <input type="radio" value="1" name="myradio" />
    </td>
    <td>Data1</td>
    <td>Data11</td>
</tr>
<tr>
    <td>
        <input type="radio" value="2" name="myradio" />
    </td>
    <td>Data2</td>
    <td>Data22</td>
    <td>Data222</td>
</tr>

js

$("input:radio[name=myradio]").click(function () {
var myvals = [];
var elem = $(this).parent().next();

while (elem.prop("tagName") == "TD") {
    myvals.push(parseInt(elem.html().substring(4)));
    elem = elem.next();
}
console.log(myvals);
});

我假设您只需要“数据”字符串后面的整数，但您可以只使用 .html() 获取 TD 元素的全部内容，而忽略 .substring(4)

小提琴

Answer 3

这应该是你的 jQuery：

$("input[type=radio]").click(function () {
    console.log($(this).val());
});

这应该是您的 HTML：

<table id="t1">
    <tr>
        <td>
            <input type="radio" name="foo" value="1" />
        </td>
        <td>Data1</td>
        <td>Data11</td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="foo" value="2" />
        </td>
        <td>Data2</td>
        <td>Data22</td>
    </tr>
</table>

jsFiddle 示例

请注意，您也可以使用$("input[name=foo]")代替$("input[type=radio]").