how can i get table column data using column header name in jquery

Question

I am trying to get table column data by using the name of header(th) in jquery.

   x1 x2 y1 y2
    2  1  2  4
    4  4  5  3
    7  5  3  4
    7  3  1  9

in this case i want to get data by x2 then it should return me 1,4,5,3

my table-

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>x1</th>
      <th>y1</th>
      <th>y2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>122</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Answer 1

Here's a way using jQuery filter() function and CSS nth-child() selector:

<table border="1" class="dataframe" id="table">
    <thead>
      <tr style="text-align: right;">
        <th>x1</th>
        <th>x2</th>
        <th>y1</th>
        <th>y2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
      </tr>
      <tr>
        <td>7</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>7</td>
        <td>3</td>
        <td>1</td>
        <td>9</td>
      </tr>
    </tbody>
</table>    
<script>
    let chosenHeaderText = 'x2',
        tableHeaders = $('#table th'),
        chosenHeader = tableHeaders.filter(function(header) {
            return tableHeaders[header].innerHTML == chosenHeaderText;
        }),
        chosenHeaderIndex = chosenHeader[0].cellIndex + 1,
        rows = $('#table tr td:nth-child(' + chosenHeaderIndex + ')');
    rows.each(function(row) {
        console.log(rows[row].innerHTML);
    });
</script>

You can replace the chosenHeaderText variable with whichever header you need.

Answer 2

You can utilise jQuery map() function to first get the index of your header and on that basis iterate the body of the table.

 const getData = (column) => { let indx $('thead').find('th').map(function(i){ if($(this).text() === column) indx = i }) $('tbody').find('tr').map(function(i){ let chk = $(this).find('td').eq(indx).text() console.log(chk) }) } let data1 = getData(`x1`) console.log(data1) console.log(`=================`) let data2 = getData(`y1`) console.log(data2) console.log(`=================`) let data3 = getData(`y2`) console.log(data3) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <table border="1" class="dataframe"> <thead> <tr style="text-align: right;"> <th>x1</th> <th>y1</th> <th>y2</th> </tr> </thead> <tbody> <tr> <td>1A</td> <td>122</td> <td>12</td> </tr> <tr> <td>1B</td> <td>123</td> <td>13</td> </tr> <tr> <td>1C</td> <td>124</td> <td>14</td> </tr> </tbody> </table>