选中行时从表中的特定列获取数据

Question

I need to get from specific table columns in a row. All data should be pushed into an array. I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value. I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.

 function getData() { // Enumerate over each checked checkbox $('input:checked').each(function() { var row = []; $(this).closest('tr').find('td:eq(5)').each(function() { row.push($(this).text()); }); // Add this row to our list of rows rows.push(row); //debugger; }); console.log(row); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Country</th> </tr> <tr> <td><input type="checkbox" id="checkbox" value="1"></td> <td>Jill</td> <td>Smith</td> <td>20</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="2"></td> <td>Eve</td> <td>Jackson</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="3"></td> <td>Amanda</td> <td>Jac</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> </table> <button type="button" onclick="getData()">Submit</button> 

Function displays only data from one column. If I add .'td:eg(6)' I got empty array

Answer 1

@Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.

$("#btnSubmit").click(function(){
    var rows = [];

$('input:checked').each(function() {
    var row = $(this).parent().parent();

    var data = {};
        $(row).find("td").each(function(i,obj){
            if(i == 1){
                data.name = $(this).text();
        }
        else if(i == 3){
                data.age = $(this).text();
        }
        else if(i == 4){
                data.country = $(this).find("select").val();
        }
    })

    rows.push(data);
  })
  console.log(rows);
}) 

And before implementing it to your code you can play it in here at JS Fiddle Demo .

In fiddle demo open console [F12] you can see your list of selected row value in an array.

Hope this is what you are looking for.

Answer 2

Here i try your result to get select row dropdwun value.

 function getData(){ var rows=[]; // Enumerate over each checked checkbox $('input:checked').each(function () { var row = []; var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val(); var fname=$(this).closest('tr').find('td:nth-child(2)').text(); var lname=$(this).closest('tr').find('td:nth-child(3)').text(); var age=$(this).closest('tr').find('td:nth-child(4)').text(); var vals=[fname ,lname, age, cnty]; row.push(vals); // Add this row to our list of rows rows.push(row); //debugger; }); console.log(rows); } 

 <table > <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Country</th> </tr> <tr> <td><input type="checkbox" id="checkbox" value="1"></td> <td>Jill</td> <td>Smith</td> <td>20</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="2"></td> <td>Eve</td> <td>Jackson</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="3"></td> <td>Amanda</td> <td>Jac</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> </table> <button type="button" onclick="getData()">Submit</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 3

Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .

 function getData(){ $("tr").each(function() { if($(this).find("select")){ console.log($(this).find("select").val()) } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table > <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Country</th> </tr> <tr> <td><input type="checkbox" id="checkbox" value="1"></td> <td>Jill</td> <td>Smith</td> <td>20</td> <td> <select class="select-cls" id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="2"></td> <td>Eve</td> <td>Jackson</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> <tr> <td><input type="checkbox" id="checkbox" value="3"></td> <td>Amanda</td> <td>Jac</td> <td>14</td> <td> <select id="country"> <option value='1'>Germany</option> <option value='2'>England</option> <option value='3'>Croatia</option> <option value='4'>USA</option> </select> </td> </tr> </table> <button type="button" onclick="getData()">Submit</button>