php - 根据行号查询多个SlideIn函数

Question

我正在寻找有关在 MySQL 查询生成的表上创建“更多详细信息”部分的最佳方法的信息，如下所示:

<tr>
  <th>First Name</th>
  <th>Surname</td>
  <th>Details</th>
</tr>
<tr>
  <td>Joe</td>
  <td>Blogs</td>
  <td><a class="button-1" href="">More Details</td>
</tr>
<tr>
    <th class="hidden_details hidden-1" colspan="3">...insert details...</th>
</tr>

每一行都有一个唯一的 ID，例如Button-2,3,4 等，我可以使用它们为每个详细信息部分创建一个唯一的类，并且我可以使用 JQuery 隐藏和显示详细信息:

$(document).ready(function() {
    $('.button-1').click(function(){
        var link = $(this);
        $('.hidden-1').slideToggle('slow', function() {
            if ($(this).is(':visible')) {
                 link.text('Hide Details');                
            } else {
                 link.text('More Details');                
            }        
        });       
    });
});

但是我对 JQuery 的了解有限，所以我认为调用代码的唯一方法是使用 php 创建多个版本。如果有人能指出我最好的方法的方向，我将不胜感激

Answer 1

检查此代码。它会帮助你。这里 id="view_1",id="show_1"1 是数据库中的动态值。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
  <th>First Name</th>
  <th>Surname</td>
  <th>Details</th>
</tr>
<tr>
  <td>Joe</td>
  <td>Blogs</td>
  <td><a class="button-1" id="view_1" href="javascript:void(0)" onclick="show_details(1)">More Details</td>
</tr>
<tr>
    <th class="hidden_details hidden-1" colspan="3" id="show_1">...insert details...</th>
</tr>

<tr>
  <td>Joe1</td>
  <td>Blogs2</td>
  <td><a class="button-1" id="view_2" href="javascript:void(0)" onclick="show_details(2)">More Details</td>
</tr>
<tr>
    <th class="hidden_details hidden-1" colspan="3" id="show_2">...insert details...</th>
</tr>
</table>

<script type="text/javascript">

    function show_details(id) {
         if ($('#show_'+id).is(':visible')) {
                 $('#view_'+id).text('More Details');
                 $('#show_'+id).hide();                
            } else {
                 $('#view_'+id).text('Hide Details'); 

                 $('#show_'+id).show();               
            } 
    }
</script>
<style type="text/css">
    .hidden_details {
        display: none;
    }
</style>