How to get table data with header value on click button in jquery

Question

I have created a table:

---------------------------
|  22   | 23    |  Select |
|-------|-------|---------|
|  NY   |  CA   | (button)| 
| Miami |Dallas | (button)|

using:

<table class="table table-bordered">
  <thead>
    <tr>
      <th><?php echo implode('</th><th>', array_keys(current($filtered_cur_result))); ?></th><th>Select</th>
    </tr>
  </thead>
  <tbody>
<?php foreach ($filtered_cur_result as $row): array_map('htmlentities', $row); ?>
    <tr>
      <td><?php echo implode('</td><td>', $row); ?></td><td><button type="button" name="update" id="update" class="update btn btn-success btn-xs">Update</button></td>
    </tr>
<?php endforeach; ?>
  </tbody>
</table>

Now on click on the button of the row I want table header and row data.For example:

If I select first button then I want: 22 NY 23 CA
If select second button then I want: 22 Miami 23 Dallas

My code is:

$(document).one('click', '.update', function() {
    var $row = $(this).closest("tr"),
        $tds = $row.find("td");

    $.each($tds, function() {
        console.log($(this).text());
    });
});

But I am getting only rows. Like:

 NY
 CA

Highly appreciate your suggestion.

Satpal · Accepted Answer · 2017-07-30 10:48:53Z

To get 22/23, You need to target the header row. Which can be done by traversing up to <TABLE> element using .closest() and using .each(index) target respective <TH> and <TD>

$(document).on('click', '.update', function() {

    var $headerRow = $(this).closest('table').find('thead tr:first'),
        $headerRowTds = $headerRow.find("th");

    var $row = $(this).closest("tr"),
        $tds = $row.find("td");

    $headerRowTds.each(function(i) {
        console.log($(this).text(), $tds.eq(i).text());
    });
});

$(document).on('click', '.update', function() {

  var $headerRow = $(this).closest('table').find('thead tr:first'),
    $headerRowTds = $headerRow.find("th");

  var $row = $(this).closest("tr"),
    $tds = $row.find("td");

  $headerRowTds.each(function(i) {
    console.log($(this).text(), $tds.eq(i).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>22</th>
      <th>23</th>
      <th>SELECT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NY</td>
      <td>CA</td>
      <td><button class="update">update</button></td>
    </tr>
    <tr>
      <td>Miami </td>
      <td>Dallas </td>
      <td><button class="update">update</button></td>
  </tbody>
</table>

ewwink · Accepted Answer · 2017-07-30 12:02:16Z

using .parent() and .prev()

$(document).on('click', '.update', function() {
  var row = $(this).parent(),

    th1 = $("th").eq(0).html(),
    td1 = row.prev().prev().html(),

    th2 = $("th").eq(1).html(),
    td2 = row.prev().html();

  console.log(th1 + ' ' + td1 + ' ' + th2 + ' ' + td2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>22</th>
      <th>23</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NY</td>
      <td>CA</td>
      <td><button type="button" name="update" id="update" class="update btn btn-success btn-xs">Update</button></td>
    </tr>
    <tr>
      <td>Miami</td>
      <td>Dallas</td>
      <td><button type="button" name="update" id="update" class="update btn btn-success btn-xs">Update</button></td>
    </tr>
  </tbody>
</table>

Chandra Kumar · Accepted Answer · 2017-07-30 10:24:04Z

You can use your code like this:

Here you can see the demo: https://output.jsbin.com/hadifef

https://jsbin.com/hadifef/edit?html,js

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead> 
   <tr>
     <th>Column1</th>
     <th>Column2</th>
     <th>Column3</th>
     <th>Column4</th>
     <th>Column5</th>
    </tr>
</thead> 
<tbody> 
    <tr>
        <td>1 One</td>
        <td>1 Two</td>
        <td>1 Three</td>
        <td>1 Four</td>
        <td>1 Five</td>
    </tr>
    <tr>
        <td>2 One</td>
        <td>2 Two</td>
        <td>2 Three</td>
        <td>2 Four</td>
        <td>2 Five</td>
    </tr>
    <tr>
        <td>3 One</td>
        <td>3 Two</td>
        <td>3 Three</td>
        <td>3 Four</td>
        <td>3 Five</td>
    </tr>
</tbody>
</table>

</body>
</html>

Jquery:

$(document).ready(function(){
 $('tr td').each(function() {
    $(this).click(function() {
        var row1 = $(this).closest('tr').find('td').eq(0).text();
        var row2 = $(this).closest('tr').find('td').eq(1).text();
        var header = $(this).closest('table').find('th').eq($(this).index()).text();
        alert(header +" => "+ row1 +" => "+ row2);
    });
 });
});

Collectives™ on Stack Overflow

How to get table data with header value on click button in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related