如何获取我在表中选择的数据行的 ID？答案

【问题标题】：How can I get the id of the datarow I selected in my table?如何获取我在表中选择的数据行的 ID？
【发布时间】：2019-04-11 19:56:30
【问题描述】：

我制作了一个由 SQL 数据库填充的表。使用 CSS 我做到了，当我将鼠标悬停在表格行上时，它会突出显示。当我单击表格行（记录）时，我想获取该记录的 id 并将其放入可用于更新或删除记录的变量中。

echo "<table>"; 

    echo "<tr>";
    echo "<th>".'ID'."</th>";
    echo "<th>".'Username'."</th>";
    echo "<th>".'Name'."</th>";
    echo "<th>".'Role'."</th>";
    echo "</tr>";
    foreach($result as $pers)
    {
        echo "<tr>";
        echo "<td>".$pers->id."</td>
        <td>".$pers->username."</td>
        <td>".$pers->name."</td>
        td>".$pers->role."</td>";
        echo "</tr>";
    }
echo "</table>";

上面你可以看到创建表的代码，它可以工作，我只需要一种方法来获取de id。

【问题讨论】：

将其放入 tr 元素的自定义数据属性中，然后在您的点击处理程序中从那里读取...
你这是什么意思？
developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
那么，使用$pers->id 怎么样？此外，这与 CSS 或“ID”有什么关系？

标签： php css sql html-table

【解决方案1】：

我认为最佳做法是：将数据属性赋予“tr”元素：

echo "<tr data-id='".$pers->id."'>";
...
echo "</tr>";

点击后可以收到id：

$( "tr" ).click(function() {
   var id = $(this).attr('data-id');
})

【讨论】：

【解决方案2】：

要在 PHP 中使用 JS 数据，您可以使用 Jquery ajax 调用。

$( "tr" ).click(function() {
   var id = $(this).first("td").html(); // now you have it in JS available
   $.ajax({
       url: "yourfile.php", // you can also send it to the php file that updates or deletes the record
       data: {"id": id},
       type: 'POST',
       success : function(data) { }
   });
});

然后是你的 PHP 代码：

<?php
if(isset($_POST['id'])){
   // session id now has your selected id as value.
   $_SESSION['id'] = $_POST['id'];
}
else{
   unset($_SESSION['id']); // unset session id every time the page reloads
   echo "<table>"; 
   echo "<tr>";
   echo "<th>".'ID'."</th>";
   echo "<th>".'Username'."</th>";
   echo "<th>".'Name'."</th>";
   echo "<th>".'Role'."</th>";
   echo "</tr>";
   foreach($result as $pers)
   {
      echo "<tr>";
      echo "<td>".$pers->id."</td>
      <td>".$pers->username."</td>
      <td>".$pers->name."</td>
      <td>".$pers->role."</td>";
      echo "</tr>";
    }
    echo "</table>";
}

然后，当您更新数据库中的一行时，您可以访问 $_SESSION['id']，因为每次单击 tr 时它都会更改。

【讨论】：

【解决方案3】：

希望这会有所帮助。单击它会将 ID 发送到控制台。源代码中的文档。

/* Put all rows in an array */
const rows = [...document.getElementsByTagName("tr")];
/* Assign event listener to each row */
rows.map(row => row.addEventListener("click", () => {
  /* Return the first element */
  const id = row.querySelector("td");
  console.log(id.textContent);
}));

tr:hover {
  background-color: yellow;
}

<table>
  <tr>
    <td>1</td>
    <td>User name 1</td>
    <td>Name 1</td>
    <td>Role 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>User name 2</td>
    <td>Name 2</td>
    <td>Role 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>User name 3</td>
    <td>Name 3</td>
    <td>Role 3</td>
  </tr>
</table>

【讨论】：