I tried to get the td values row by row if the checkbox is checked. Below is my HTML table format.
<table class="example">
<tr role="row" class="odd ">
<td class=""><input type="checkbox" value="12"></td>
<td class="sorting_1">Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr role="row" class="even">
<td class=""><input type="checkbox" value="12"></td>
<td class="sorting_1">Airi Satou1</td>
<td>Accountan1t</td>
<td>Tokyo1</td>
<td>331</td>
<td>$162,7001</td>
</tr>
</table>
<input type="submit" class="tble_submit">
Based on the selection of checkboxes i need the td values. If i checked both then i need both tr td. I tried with below jquery code which always returning the first tr td values even if i checked both checkboxes.
$(".tble_submit").click(function(){
$('.example tr input[type="checkbox"]:checked').each(function(){
var chk_len = $('.example input[type="checkbox"]:checked').length;
for(i=0;i<=chk_len;i++){
if ($('.example tr:eq('+i+') td input[type="checkbox"]:checked')){
var $row = $(this).parents('tr');
var table_len = $('.example tr:eq('+i+') td').length;
var ab = $('.example tr td:eq('+i+') input').val();
alert(ab)
for(i=1;i<table_len;i++){
var abc = $('.example tr td:eq('+i+')').html();
alert(abc)
}
}
}
});
});
Please help me on this. Thanks in advance.
it should be much simpler than that
$(".tble_submit").click(function(){
$('.example tr input[type="checkbox"]:checked').each(function(){
var $row = $(this).closest('tr');
//used :not(:first-child) to skip first element (the checkbox td)
$('td:not(:first-child)', $row).each(function(i){
var abc = $(this).text();
alert(abc);
})
});
});
Give this a try:
$('.tble_submit').click(function (e) { e.preventDefault(); var rows = []; // Enumerate over each checked checkbox $('input:checked').each(function () { var row = []; // Enumerate over all td elements in the parent tr, // skipping the first one (which contains just the // checkbox). $(this).closest('tr').find('td:not(:first-child)').each(function () { // Gather the text into row row.push($(this).text()); }); // Add this row to our list of rows rows.push(row); }); // JSONify for easy display alert(JSON.stringify(rows)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="example"> <tr role="row" class="odd "> <td class=""><input type="checkbox" value="12"></td> <td class="sorting_1">Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>$162,700</td> </tr> <tr role="row" class="even"> <td class=""><input type="checkbox" value="12"></td> <td class="sorting_1">Airi Satou1</td> <td>Accountan1t</td> <td>Tokyo1</td> <td>331</td> <td>$162,7001</td> </tr> </table> <input type="submit" class="tble_submit">
$(".tble_submit").click(function(){
$.each($('.example').find('tr'),function(i,data){
if($($(data).find('input[type="checkbox"]')).is(':checked'))){
//You can get all the values respectively of tr
console.log(data)
};
})
});
Please Try This Way
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.