Php 如何在jquery中通过单击按钮获取具有标题值的表数据_Php_Jquery_Html_Mysql

Php 如何在jquery中通过单击按钮获取具有标题值的表数据

php jquery html mysql

Php 如何在jquery中通过单击按钮获取具有标题值的表数据,php,jquery,html,mysql,Php,Jquery,Html,Mysql,我创建了一个表： --------------------------- | 22 | 23 | Select | |-------|-------|---------| | NY | CA | (button)| | Miami |Dallas | (button)| 使用： <table class="table table-bordered"> <thead> <tr> <th><

我创建了一个表：

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

但我只得到了一排。比如：

 NY
 CA

非常感谢您的建议。

要获得

22/23

，您需要以标题行为目标。这可以通过使用

.closest（）

和

.each（index）

分别遍历

和

元素来实现

$（文档）.on（'click'，'update'，function（））{
var$headerRow=$（this）.closest（'table'）.find（'thead tr:first'），
$headerRowTds=$headerRow.find（“th”）；
var$row=$（this）.tr，
$tds=$row.find（“td”）；
$headerRowTds.每个（功能（i）{
log（$（this.text（），$tds.eq（i.text（））；
});
});

22
23
挑选
纽约
加利福尼亚州
更新
迈阿密
达拉斯
更新
您可以这样使用代码：
在这里您可以看到演示：

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>

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

使用.parent（）
和.prev（）


$（文档）.on（'click'，'update'，function（））{
变量行=$（this）.parent（），
th1=$（“th”）.eq（0.html（），
td1=行.prev（）.prev（）.html（），
th2=$（“th”）.eq（1.html（），
td2=row.prev（）.html（）；
控制台日志（th1+''+td1+''+th2+''+td2）；
});

22
23
挑选
纽约
加利福尼亚州
更新
迈阿密
达拉斯
更新

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

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