在jQuery中，如何获取使用复选框选择的表的特定行的值？

Question

这是我的jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

</head>
<body>
<table id="one" style="border:1px solid red;">
    <caption>Table 1</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th> Name</th>
<th>System</th>
</tr>
</thead>
    <tbody>
      <tr>
        <td><input type="checkbox" /></td>
        <td>12</td>
        <td>Sam</td>
        <td>FSS</td>
     </tr>

     <tr>
        <td><input type="checkbox" /></td>
        <td>87</td>
        <td>Harry</td>
        <td>MSS</td>
     </tr>
     <tr>
        <td><input type="checkbox" /></td>
        <td>23</td>
        <td>Rita</td>
        <td>MVV</td>
     </tr>
     <tr>
        <td><input type="checkbox" /></td>
        <td>65</td>
        <td>Tom</td>
        <td>RDD</td>
     </tr>   
   </tbody>
</table>

<br><hr><br>
<button id="add">Add</button>
</body>
</html>

在这里，当我单击添加按钮时，我想获取在不同变量（即id，name和system中应检查的值）中检查的相应行的所有值。

我希望这些值存储在字符串（不是映射）中。 你能建议我一个jQuery / JS实现以下

UPDATE

如果我的复选框旁边有一个隐藏字段，如何获取其值？ 例如

<td>
<input type="checkbox" />
<input type="hidden" value="secret" id="alertTyp" />
</td>

Answer 1

尝试这个：

var stringresult = '';
$('#add').on('click', function () {
    $('input:checked').each(function () {
        $this = $(this);
        var one = $this.parent().siblings('td').eq(0).text();
        var two = $this.parent().siblings('td').eq(1).text();
        var three = $this.parent().siblings('td').eq(2).text();
        alert(one + ' ' + two + ' ' + three);

        //or just 
        stringresult += $this.parent().siblings('td').text();
    });
    console.log(stringresult);
});

此处演示

Answer 2

如果您想要<td>的字符串，请使用以下jQuery代码：

var str = "";
$('#add').click(function(){
    $('input:checkbox:checked').filter(function(){
        str = $(this).closest('tr').text();
    });
});

DEMO

Answer 3

请看我的小提琴寻求解决方案

[http://jsfiddle.net/a4WMc/]

http://jsfiddle.net/a4WMc/

Answer 4

尝试这个：

$('#alertTyp').val()

Answer 5

您可以遍历所有行...性能如何的问题，那将是：

var str = '';
$('#one').find('tbody').find('tr').each(function()
{
    if($(this).children().eq(0).attr('checked') == 'checked')
    {
        $(this).find('td').each(function()
        {
         str += $(this).text();
        });
    }
});

或类似的东西...我没有时间atm来测试这个抱歉。

Answer 6

我会做这样的事情（未经测试的代码！！！）：

var myRow = $('input[type="checkbox"]:checked').parents('tr:first');
var result;
myRow.children('td').each(){
    result += $(this).html() + "|";
}

如果只有1个选中的复选框，这可能会起作用...否则，您需要循环遍历所有选中的复选框才能获取值...

在jQuery中，如何获取使用复选框选择的表的特定行的值？

问题描述

6 个解决方案

解决方案1
1 2013-08-05 09:27:25

解决方案2
1 2013-08-05 09:27:58

解决方案3
1 2013-08-05 09:34:36

解决方案4
1 2013-08-23 08:59:41

解决方案5
0 2013-08-05 09:24:38

解决方案6
0 2013-08-05 09:24:45

在jQuery中，如何获取使用复选框选择的表的特定行的值？

问题描述

6 个解决方案

解决方案1 1 2013-08-05 09:27:25

解决方案2 1 2013-08-05 09:27:58

解决方案3 1 2013-08-05 09:34:36

解决方案4 1 2013-08-23 08:59:41

解决方案5 0 2013-08-05 09:24:38

解决方案6 0 2013-08-05 09:24:45

解决方案1
1 2013-08-05 09:27:25

解决方案2
1 2013-08-05 09:27:58

解决方案3
1 2013-08-05 09:34:36

解决方案4
1 2013-08-23 08:59:41

解决方案5
0 2013-08-05 09:24:38

解决方案6
0 2013-08-05 09:24:45