Jquery获取表gridview中所有已检查行的值

时间:2012-03-14 11:54:08

标签: javascript jquery asp.net gridview

我有一张如下表格

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>789</td><td>ghi</td></tr>
</table>

我想检索(使用jquery)表中所有已检查ID的javascript数组。

到目前为止,我有以下jquery代码,点击jqcc按钮为我带来了每个已检查项目的警告框,因此我需要检索第二个td的值并将其添加到一个数组,

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
    $('#jqcc').click(function() {
        $('input:checkbox:checked', tableControl).each(function() {
            alert('checked');
        });
    });
});

5 个答案:

答案 0 :(得分:8)

你应该做

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
   var arrayOfValues = [];
    $('#jqcc').click(function() {
        $('input:checkbox:checked', tableControl).each(function() {
            arrayOfValues.push($(this).closest('tr').find('td:last').text());
        }).get();
    });
});

arrayOfValues会将文字保留在最后一个td内。

编辑当然你也可以使用地图

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
   var arrayOfValues = [];
    $('#jqcc').click(function() {
          arrayOfValues =  $('input:checkbox:checked', tableControl).map(function() {
            return $(this).closest('tr').find('td:last').text();
        });
    });
});

答案 1 :(得分:5)

  

我想检索(使用jquery)表中所有已检查ID的javascript数组。

尝试:

var ids = $("#mytable tr:has(input:checked)").map(function() {
   var $tr = $(this);
   var id = $tr.find("td:last").text();
   return id;
}).toArray();

alert(ids.join(", "));

答案 2 :(得分:2)

首先添加id作为checkbox的值参数作为输入而没有值实际使用:

<table id="mytable">
    <tr><th>checked</th><th>id</th></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="123" /></td><td>123</td></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="456" /></td><td>456</td></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="789" /></td><td>789</td></tr>
</table>

然后在jQuery中创建你的数组:

var checkedValues = $("input:checkbox:checked", "#mytable").map(function() {
    return $(this).val();
}).get();
alert(checkedValues.join(','));

Working fiddle

答案 3 :(得分:2)

var tableControl = document.getElementById('mytable');
$('#jqcc').click(function() {
    var result = []
    $('input:checkbox:checked', tableControl).each(function() {
        result.push($(this).parent().next().text());
    });
    alert(result);
});

See demo

答案 4 :(得分:0)

这就是你要求的:

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
    $('#jqcc').click(function() {
        var obj = new Array();
        $('input:checkbox:checked', tableControl).each(function() {
            var innertext = $(this).parent().next().text();
            obj.push(innertext);
        });
            console.debug(obj); // Write it to the console
    });
});

http://jsfiddle.net/uEr3n/