Jquery gets the values ​​of all test rows in a gridview table

Question

I have a table as below

<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> 

I want to get (using jquery) a javascript array of all verified identifiers in a table.

So far I have the following jquery code, which, when I click the jqcc button, brings me a warning window for each of the selected elements, so instead of warning, I need to get the value of the second td and add it to the array,

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

Answer 1

You have to do

 $(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 will contain the text inside the last td.

EDIT of course you can also use a map

 $(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(); }); }); }); 

Answer 2

I want to get (using jquery) a javascript array of all verified identifiers in a table.

Try:

 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(", ")); 

Answer 3

First of all, add id as a parameter to the value of checkbox as input without a value that is little used:

 <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> 

Then in jQuery create your array:

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

Working script

Answer 4

 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

Answer 5

This does what you ask for:

 $(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/