在php生成的表单元格上添加onclick事件 - Add onclick event on a php-generated table cell

Add onclick event on a php-generated table cell

我想用PHP生成一个包含动态内容的HTML表，并在每行的单元格上添加一个onclick事件，以触发取决于该行的操作。

如何做到这一点？

下面是我的例子：我有一个从数据库中打印数据的表。表由3列组成。第1列和第2列包含姓名，第3列表示注释。第三栏显示"存在评论"或"没有评论"，这取决于相关评论是否存在。

目标是当用户点击第三列时弹出一个小窗口，显示给定的注释。

这是一个表格的例子，也是我迄今为止尝试过的：

<table border=1>
   <tr>
      <th>ID</th>
      <th>Vardas</th>
      <th></th>
   </tr>
<?php while($row = mysql_fetch_array($res)) : ?>
   <tr>
      <td><?php echo $row['id'] ?></td>
      <td><?php echo $row['vardas'] ?></td>
      <td><?php echo $row['gedimas'] ?></td>
   </tr>
<?php endwhile; ?>
</table>

如何为$row['gedimas']行添加点击事件，以显示数据库中的完整注释？

您可以直接在PHP:中放置"onclick"事件

<td <?php echo "onclick='displayComment(".$id.")'" ?> >

关于打开窗口的一般结构，您可以很容易地构建表，然后在有注释的情况下有另一个页面来显示注释。

表格代码：

<table>
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Has comment ?</th>
  </tr>
<?php
for( $i = 0; $i<count($database_data); $i++){
   $item = $database_data[$i];
   ?><tr>
       <td><?php echo $item[0] ?></td>
       <td><?php echo $item[1] ?></td>
       <td <?php 
          echo "onclick='displayComment("
          echo $item[0].", ".$item[1]
          echo ")'"?>
       ><?php echo $item[2] ? "Comment exists" : "No comments" ?></td>
     </tr>
}

然后，您需要包含一个javascript文件，其中包含以下代码：

function displayComment(name, surname) {
   window.open(
      "display_comment.php?name="+encodeURI(name)+"&surname="+encodeURI(surname),
      "_blank",
      "height=200, width=300"
}

最后，您需要display_comment.php页面，其本质是：

// get comment from database using data in $_GET["name"] and $_GET["surname"]
Comment from <?php echo $_GET["name"]." ".$_GET["surname"] ?> : 
<br>
<?php echo $comment_retrieved_from_database ?>

备选方案

另一种选择是只在HTML代码中记录注释的id，然后在javascript中添加onclick事件。

单元格的php代码如下：

<td <?php echo "data-comment-id='$id'" ?> >

您可以通过以下方式在javascript中添加onclick事件：

var tableCells = document.querySelectorAll("td[data-comment-id]");
for(var i=0; i<tableCells.length; i++){
   var cell = tableCells[i];
   var commentId = cell.getAttribute("data-comment-id");
   cell.addEventListener("click", function(){openPopup(commentId);});
}