从表格行中获取 HTML 数据点击进入 javascript 警报答案

【问题标题】：Get HTML data from table row click into javascript alert从表格行中获取 HTML 数据点击进入 javascript 警报
【发布时间】：2025-12-15 07:25:02
【问题描述】：

我的最终目标是单击表格上的一行并将其填充到其旁边的表单中以进行更新。此处的代码只是“尝试”单击一行并将其显示在带有行数据的 Javascript 警报中，然后再对表单的填充进行编码。

在这里，我使用 PHP 填充了表格。 TR 类有“updatetbl”，稍后与 javascript 一起使用。我使用了这个问题的代码示例：Get the table row data with a click

if ($patients->num_rows > 0){
    while($row = $patients-> fetch_assoc()) {
         echo '<tr class="updatetbl">';
         echo '<td class="updatetbl">' . $row['ID'] . '</td>';
         echo '<td class="updatetbl">' . $row['Forename'] . '</td>';
         echo '<td class="updatetbl">' . $row['Surname'] . '</td>';
         echo '<td class="updatetbl">' . $row['DOB'] . '</td>';
         echo '<td class="updatetbl">' . $row['Address'] . '</td>';
         echo '<td class="updatetbl">' . $row['Postcode'] . '</td>';
         echo '<td class="updatetbl">' . $row['Telephone'] . '</td>';
         echo '<td class="updatetbl">' . $row['Email'] . '</td>';
         echo '<tr>';
     }
}else{
  echo "0 results";
}

我首先尝试使用 Javascript 将数据放入警报中（我只是想在放入表单之前查看我有数据）

要填充警报并注册点击，我有以下 javascript。

<script>
$("tr.updatetbl").click(function(){
   var tableData = $(this).children("td").map(function(){
       return $(this).text();
   }).get();

    alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
        + $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , "));
});
</script>

据我所知，tr.updatetbl 专注于单击此处？然后收集表格数据..

有什么想法吗？

更新：我确实有等。

 <table class="table table-hover">
      <thead>
           <tr>
             <th>ID</th>
             <th>Forename</th>
             <th>Surname</th>
             <th>D.O.B</th>
             <th>Address</th>
             <th>Postcode</th>
             <th>Tel</th>
             <th>Email</th>
           </tr>
      </thead>

     <?php
        $servername = removed
        $dbname = removed
        $username = removed
        $password = removed

        $connection = new mysqli($servername, $username, $password, $dbname);

    if ($connection->connect_error) {
           die('Could not connect: ' . $connection->connect_error);
       }

     $sql = "SELECT ID, Forename, Surname, DOB, Telephone, Email, Address, Postcode FROM people";
      $people= $connection->query($sql);

      if ($patients->num_rows > 0){
           while($row = $patients-> fetch_assoc()) {
              echo '<tr class="updatetbl">';
              echo '<td>' . $row['ID'] . '</td>';
              echo '<td>' . $row['Forename'] . '</td>';
              echo '<td>' . $row['Surname'] . '</td>';
              echo '<td>' . $row['DOB'] . '</td>';
              echo '<td>' . $row['Address'] . '</td>';
              echo '<td>' . $row['Postcode'] . '</td>';
              echo '<td>' . $row['Telephone'] . '</td>';
              echo '<td>' . $row['Email'] . '</td>';
              echo '</tr>';
        }

 }
  else
 {
  echo "0 results";
 }
  $connection->close();
  ?>
 </table>

已解决：

我想通了 - 我将编译后的代码放入带有 javascript 的新 jFiddle 中，但它仍然无法正常工作。我不知道为什么，所以我查看了你的，我注意到在你的旁边有 jQuery 库！我的是标准 JS。所以我意识到我没有包含<script src="jquery-1.11.3.min.js"></script>

我投了以下答案，因为我得到了毫不费力的帮助，尽管我确信所有其他答案都会起作用。

【问题讨论】：

您在这里遇到的一个问题是您没有正确关闭。
刚刚更新了，我真傻！虽然不幸的是仍然不起作用。谢谢
您无法监听表格行上的“点击”事件。它根本没有被提出。相反，您必须监听行单元格的 content 的点击事件。
从 tds 中移除 updatetbl 类，你不需要它们。（@arkascha ：活动在 TR 上进行）
点击TR听听没问题

【解决方案1】：

你在这一行的末尾有一个“)”，这是不需要的，这就是它不起作用的原因：

`alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
    + $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , ")); which isnt needed.

此外，只需在行上添加类updatetbl。

HTML

<table>
    <tbody>
    <tr class="updatetbl">
        <td >ID</td>
        <td >Forename</td>
        <td >Surname</td>
        <td >DOB</td>
        <td >Address</td>
        <td >Postcode</td>
        <td >Telephone</td>
        <td >Email</td>
    </tr>
    <tbody>
</table>

JS：

$(".updatetbl").click(function(){
   var tableData = $(this).children("td").map(function(){
       return $(this).text();
   }).get();

    alert("Data = "+ tableData[0] + " , " + tableData[1] + " , "
        + tableData[2] + " , " + tableData[3] + " , ");
});

【讨论】：

谢谢，我已经更新了那些愚蠢的错误 - 虽然似乎仍然没有注册点击。
你的页面还有其他的JS吗？例如，您有像Firebug 这样的调试器吗？它有助于检查 javascript 错误
我有萤火虫，但它不会引发有关控制台内错误的任何问题。
好吧，我的错，只是你忘记声明 <table> 和 <tbody> 所以 <tr> 不会被 javascript 看到。
我确实有等，它就在代码之外（我已经用这段代码更新了主帖）只是那里有很多 php。