Get data from specific columns in table when row checked

1

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

javascript jquery

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.
  
  – Oram
  Nov 20 '18 at 11:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Oram I updated code
  
  – Bruno
  Nov 20 '18 at 11:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bruno you want array of object containing all data in a row or just the selected dropdown value?
  
  – Mohan Rajput
  Nov 20 '18 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value
  
  – Bruno
  Nov 20 '18 at 11:59
  

  
  
  
  

add a comment | 

1

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

javascript jquery

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.
  
  – Oram
  Nov 20 '18 at 11:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Oram I updated code
  
  – Bruno
  Nov 20 '18 at 11:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bruno you want array of object containing all data in a row or just the selected dropdown value?
  
  – Mohan Rajput
  Nov 20 '18 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value
  
  – Bruno
  Nov 20 '18 at 11:59
  

  
  
  
  

add a comment | 

1

1

1

1

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

javascript jquery

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

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

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

javascript jquery

javascript jquery

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

share|improve this question

share|improve this question

edited Nov 20 '18 at 12:00

Bruno

edited Nov 20 '18 at 12:00

Bruno

edited Nov 20 '18 at 12:00

Bruno

asked Nov 20 '18 at 11:19

BrunoBruno

63

asked Nov 20 '18 at 11:19

BrunoBruno

63

asked Nov 20 '18 at 11:19

BrunoBruno

63

63

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.
  
  – Oram
  Nov 20 '18 at 11:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Oram I updated code
  
  – Bruno
  Nov 20 '18 at 11:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bruno you want array of object containing all data in a row or just the selected dropdown value?
  
  – Mohan Rajput
  Nov 20 '18 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value
  
  – Bruno
  Nov 20 '18 at 11:59
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.
  
  – Oram
  Nov 20 '18 at 11:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Oram I updated code
  
  – Bruno
  Nov 20 '18 at 11:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bruno you want array of object containing all data in a row or just the selected dropdown value?
  
  – Mohan Rajput
  Nov 20 '18 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value
  
  – Bruno
  Nov 20 '18 at 11:59
  

  
  
  
  

Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.

– Oram
Nov 20 '18 at 11:26

Please share a Minimal, Complete, and Verifiable example. Your javascript is not enough to run the code and understand what is going wrong.

– Oram
Nov 20 '18 at 11:26

@Oram I updated code

– Bruno
Nov 20 '18 at 11:37

@Oram I updated code

– Bruno
Nov 20 '18 at 11:37

@Bruno you want array of object containing all data in a row or just the selected dropdown value?

– Mohan Rajput
Nov 20 '18 at 11:55

@Bruno you want array of object containing all data in a row or just the selected dropdown value?

– Mohan Rajput
Nov 20 '18 at 11:55

@MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value

– Bruno
Nov 20 '18 at 11:59

@MohanRajput I want an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value

– Bruno
Nov 20 '18 at 11:59

add a comment | 

3 Answers
3

active

oldest

votes

3

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

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

add a comment | 

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>

share|improve this answer

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.
  
  – Bruno
  Nov 20 '18 at 12:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i edit the above code. please check if it is helpful for you.
  
  – AJAY MAURYA
  Nov 20 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for
  
  – Bruno
  Nov 20 '18 at 12:29
  
  
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391877%2fget-data-from-specific-columns-in-table-when-row-checked%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

3

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

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

add a comment | 

3

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

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

add a comment | 

3

3

3

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

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

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

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

answered Nov 20 '18 at 12:19

Mohan RajputMohan Rajput

271212

271212

add a comment | 

add a comment | 

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>

share|improve this answer

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.
  
  – Bruno
  Nov 20 '18 at 12:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i edit the above code. please check if it is helpful for you.
  
  – AJAY MAURYA
  Nov 20 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for
  
  – Bruno
  Nov 20 '18 at 12:29
  
  
  

  
  
  
  

add a comment | 

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>

share|improve this answer

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.
  
  – Bruno
  Nov 20 '18 at 12:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i edit the above code. please check if it is helpful for you.
  
  – AJAY MAURYA
  Nov 20 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for
  
  – Bruno
  Nov 20 '18 at 12:29
  
  
  

  
  
  
  

add a comment | 

2

2

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>

share|improve this answer

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

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>

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>

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>

share|improve this answer

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

share|improve this answer

share|improve this answer

edited Nov 20 '18 at 12:12

edited Nov 20 '18 at 12:12

edited Nov 20 '18 at 12:12

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

answered Nov 20 '18 at 11:52

AJAY MAURYAAJAY MAURYA

47839

47839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.
  
  – Bruno
  Nov 20 '18 at 12:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i edit the above code. please check if it is helpful for you.
  
  – AJAY MAURYA
  Nov 20 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for
  
  – Bruno
  Nov 20 '18 at 12:29
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.
  
  – Bruno
  Nov 20 '18 at 12:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i edit the above code. please check if it is helpful for you.
  
  – AJAY MAURYA
  Nov 20 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for
  
  – Bruno
  Nov 20 '18 at 12:29
  
  
  

  
  
  
  

thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.

– Bruno
Nov 20 '18 at 12:02

thanks, I need an array containing data from columns 1, 3 and 4 (Firstname, Age,Country) which is selected dropdown value. Your solution does not work well it does not give any data.

– Bruno
Nov 20 '18 at 12:02

i edit the above code. please check if it is helpful for you.

– AJAY MAURYA
Nov 20 '18 at 12:13

i edit the above code. please check if it is helpful for you.

– AJAY MAURYA
Nov 20 '18 at 12:13

Exactly what I was looking for

– Bruno
Nov 20 '18 at 12:29

Exactly what I was looking for

– Bruno
Nov 20 '18 at 12:29

add a comment | 

0

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>

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

add a comment | 

0

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>

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

add a comment | 

0

0

0

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>

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

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>

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>

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>

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

answered Nov 20 '18 at 11:47

manikant gautammanikant gautam

1,62511219

1,62511219

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391877%2fget-data-from-specific-columns-in-table-when-row-checked%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here