Question

我创建了一个表：

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

使用：

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

现在点击我想要表格标题和行数据的行的按钮。例如：

如果我选择第一个按钮，那么我想： 22 NY 23 CA
如果选择第二个按钮，那么我想： 22迈阿密23达拉斯

我的代码是：

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

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

但我只得到行。像：

 NY
 CA

非常感谢您的建议。

Answer 1

要获取22/23，您需要定位标题行。可以通过使用<TABLE>遍历.closest()元素并使用.each(index)目标<TH>和<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>

Answer 2

您可以使用以下代码：

在这里您可以看到演示：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);
    });
 });
});

Answer 3

使用.parent()和.prev()

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

如何在jquery中单击按钮获取带有标题值的表数据

3 个答案: