如何显示表格的更多信息答案

【问题标题】：How to show more info of the table如何显示表格的更多信息
【发布时间】：2021-06-14 08:16:15
【问题描述】：

我有一个包含数据库信息的表格。有 ID、姓名、主题和日期。当我单击表格的一行 (tr) 时，我想显示更多数据，例如消息、操作系统、IP 等。我找到了解决方案，但它只在第一个 tr 上工作，而不是全部。

这是我的代码：

while($row = $result->fetch_assoc())
{
   $id=$row['ID'];
   $name=$row['Name'];
   $mail=$row['Email'];
   $subject=$row['Subject'];
   $message=$row['Message'];  
   $date=$row['Date'];
   $ip=$row['IP'];
   $device=$row['Device'];
   $os=$row['OS'];
   $browser=$row['Browser'];
   $finish=$row['Finish'];

   echo 
       '<tr class="trX" id="flip">
           <td class="tdX">' . $id . '</td>
           <td class="tdX">' . $name . '</td>
           <td class="tdX">' . $subject . '</td>
           <td class="tdX">' . $date . '</td>
           <div id="panel">
           ID:' . $id . '
           Name:' . $name . '
           Email:' . $mail . '
           Subject:' . $subject . '
           Message:' . $message . '
           Date:' . $date . '
           IP:' . $ip . '
           Mobile:' . $device . '
           OS:' . $os . '
           Browser:' . $browser . '
           Finish:' . $finish . '
         </div>
       </tr>';
    
 
}
echo ' </table>  ';

和JS查询

  $(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

感谢提示

【问题讨论】：

# 表示“id”，它在整个 HTML 文档中应该是唯一的。见这里stackoverflow.com/q/544010/296555。您的 JS 将无法判断您指的是哪个元素，因为您的所有行都具有相同的 ID，flip。常见的解决方案是在 click 发生时查找元素或在每一行中嵌入单独的点击处理程序。
我使用类。但是，如果我单击每个元素，它会以相同的 $id 显示相同的信息。所以....我在PHP中使用了flip-i，但我不能在JS中使用。或者我应该这样做：这个功能？谢谢

标签： php html jquery css mysql

【解决方案1】：

它只适用于第一个 tr，因为您不能将 ID flip 重复用于其他元素。我能想到的解决方案很少：

有一个递增的变量并将其分配给像flip-i 这样的id，我这里是递增变量。将点击事件附加到此，然后切换子元素。
将点击事件附加到一个类，然后切换该点击类的子类。

【讨论】：

我使用类。但是，如果我单击每个元素，它会以相同的 $id 显示相同的信息。所以....我在PHP中使用了flip-i，但我不能在JS中使用。或者我应该这样做：这个功能？谢谢

【解决方案2】：

我以这种方式更改了您的代码：

<tr class="trX" id="flip_".$i onclick="flippanel($i)">
       <td class="tdX">' . $id . '</td>
       <td class="tdX">' . $name . '</td>
       <td class="tdX">' . $subject . '</td>
       <td class="tdX">' . $date . '</td>
       <div id="panel_".$i>
       ID:' . $id . '
       Name:' . $name . '
       Email:' . $mail . '
       Subject:' . $subject . '
       Message:' . $message . '
       Date:' . $date . '
       IP:' . $ip . '
       Mobile:' . $device . '
       OS:' . $os . '
       Browser:' . $browser . '
       Finish:' . $finish . '
     </div>
   </tr>

在 jQuery 中你可以这样称呼它

function flippanel(i)

然后您可以通过个人ID轻松访问面板

【讨论】：