Can you please take a look at above demo and let me know why I am not able to get the values of selected (checked) rows from the table? I have a code like this:
$("#btn").on("click", function () {
var checkedRows = [];
$("#tbody tr").each(function () {
if ($(this).find("input").is(":checked")) {
checkedRows.push($(this).find("td:eq(1)").html());
}
// console.log(checkedRows);
});
var result = [];
$.each($("td:eq()"), function (idx, item) {
if (checkedRows.indexOf(idx> -1)){ result.push(item);}
});
if (result.length < 2) {
alert("Please Select 2 to 4 Models");
}
if (result.length > 4) {
alert("Please Select 2 to 4 Models");
} else {
console.log(result);
}
});
and HTML as:
<table border="1" width="100%">
<thead>
<tr>
<td><input type='checkbox' /></td>
<td>Row 1, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' /></td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
<tr>
<td><input type='checkbox' /></td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</tr>
</tbody>
</table>
<input id="btn" type="button" label="button" value="get rows" />
Thanks,
Update
result = [
[' Row 1, cell 2 ' , ' Row 2, cell 3 '],
[' Row 2, cell 2 ' , ' Row 2, cell 3 '],
[' Row 1, cell 2 ' , ' Row 2, cell 3 ']
]
Getting the second column html of all the checked rows is quite straight forward; .map()
makes it really easy:
$('#btn').on('click', function() {
var checkedRows = $(':checkbox:checked')
.closest('tr').find('td:eq(1)').map(function() {
return $(this).html();
}).get();
console.log( checkedRows );
});
$('#btn').on('click', function() { var checkedRows = $(':checkbox:checked') .closest('tr').find('td:eq(1)').map(function() { return $(this).html(); }).get(); //Output --- just for demo $('pre.out').text( JSON.stringify( checkedRows ) ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table border="1" width="100%"> <thead> <tr> <td><input type='checkbox' /></td> <td>Row 1, cell 2</td> <td>Row 2, cell 3</td> </tr> </thead> <tbody> <tr> <td><input type='checkbox' /></td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td><input type='checkbox' /></td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td><input type='checkbox' /></td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> <tr> <td><input type='checkbox' /></td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </tr> </tbody> </table> <input id="btn" type="button" label="button" value="get rows" /> <pre class="out"></pre>
UPDATE
To generate an array of array as indicated in the your comments under this question, here is the code:
$('#btn').on('click', function() {
var checkedRows = [];
$(':checkbox:checked').closest('tr').each(function() {
checkedRows.push(
$(this).find('td:gt(0)').map(function() {
return $(this).html();
}).get()
);
});
console.log( checkedRows );
});
$('#btn').on('click', function() { var checkedRows = []; $(':checkbox:checked').closest('tr').each(function() { checkedRows.push( $(this).find('td:gt(0)').map(function() { return $(this).html(); }).get() ); }); //Output --- just for demo $('pre.out').text( JSON.stringify( checkedRows ) ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table border="1" width="100%"> <thead> <tr> <td><input type='checkbox' /></td> <td>Row 1, cell 2</td> <td>Row 2, cell 3</td> </tr> </thead> <tbody> <tr> <td><input type='checkbox' /></td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td><input type='checkbox' /></td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td><input type='checkbox' /></td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> <tr> <td><input type='checkbox' /></td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </tr> </tbody> </table> <input id="btn" type="button" label="button" value="get rows" /> <pre class="out"></pre>
OUTPUT: -- with all checkboxes selected.
[
["Row 1, cell 2","Row 2, cell 3"],
["Row 2, cell 2","Row 2, cell 3"],
["Row 3, cell 2","Row 3, cell 3"],
["Row 4, cell 2","Row 4, cell 3"],
["Row 4, cell 2","Row 4, cell 3"]
]
$("#tbody tr")
should be $("tbody tr")
because tbody
is not an ID. Also suggest you to add input type
in if condition ( input[type=checkbox]
).
$("#btn").on("click", function () {
var checkedRows = [];
$("tbody tr").each(function () {
if ($(this).find("input[type=checkbox]").is(":checked")) {
checkedRows.push($(this).find("td:eq(1)").html());
}
});
console.log(checkedRows);
//......
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.