title: How to get table data with header value on click button in jquery
body: <p>I have created a table:</p>
  
  <pre><code>---------------------------
  |  22   | 23    |  Select |
  |-------|-------|---------|
  |  NY   |  CA   | (button)| 
  | Miami |Dallas | (button)| 
  </code></pre>
  
  <p>using:</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;?php echo implode('&lt;/th&gt;&lt;th&gt;', array_keys(current($filtered_cur_result))); ?&gt;&lt;/th&gt;&lt;th&gt;Select&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  &lt;?php foreach ($filtered_cur_result as $row): array_map('htmlentities', $row); ?&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;?php echo implode('&lt;/td&gt;&lt;td&gt;', $row); ?&gt;&lt;/td&gt;&lt;td&gt;&lt;button type="button" name="update" id="update" class="update btn btn-success btn-xs"&gt;Update&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;?php endforeach; ?&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now on click on the button of the row I want table header and row data.For example:</p>
  
  <ul>
  <li>If I select first button then I want: <strong>22 NY 23 CA</strong></li>
  <li>If select second button then I want: <strong>22 Miami 23 Dallas</strong></li>
  </ul>
  
  <p>My code is:</p>
  
  <pre><code>$(document).one('click', '.update', function() {
      var $row = $(this).closest("tr"),
          $tds = $row.find("td");
  
      $.each($tds, function() {
          console.log($(this).text());
      });
  });
  </code></pre>
  
  <p>But I am getting only rows. Like:</p>
  
  <pre><code> NY
   CA
  </code></pre>
  
  <p>Highly appreciate your suggestion.</p>