Question

我正在尝试为从数据库获取的数据制作手风琴表。只想在点击行后显示下面一行中的描述数据。我一直在尝试修改我找到的大量代码。

例如：http://jsfiddle.net/XE6AG/2/（这就是我想要的）或下面显示的代码。

我主要获取实际表格上方的原始描述数据。

<body>
    <?php
    include("info.php");
    $query = "SELECT * FROM list1 ORDER BY `FName` ASC"; 
    $result = mysql_query($query);
    ?>
    <table class="research">
        <tr>
            <th>Name</th>
            <th>URL</th>
            <th>Age</th>
            <th>Address</th>
        </tr>

        <?php while($row = mysql_fetch_array($result)):?>

        <tr class="accordion">
            <td>
                <?php echo $row['FName'];?>
            </td>
            <td>
                <?php echo "<a href='http://".$row['URL']."'>".$row['URL']."</a>"?>

            </td>
            <td>
                <?php echo $row['Age'];?>
            </td>
            <td>
                <?php echo $row['Address'];?>
            </td>
        </tr>
        <tr>
            <?php echo $row['Description'];?>
        </tr>
        <?php endwhile;?>
    </table>
<script>
    $(function () {
        $(".research tr:not(.accordion)").hide();
        $(".research tr:first-child").show();
        $(".research tr.accordion").click(function () {
            $(this).nextAll("tr").fadeToggle("fast");
        });
    });
</script>

感谢您的帮助。

Answer 1

我成功地解决了＃34;它使用bootstrap

＆＃13;

<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>The web</title>
    <style>
        .hiddenRow {
            padding: 0 !important;
        }
    </style>
    <style>
        tr.accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

            tr.accordion.active, tr.accordion:hover {
                background-color: #ddd;
            }

            tr.accordion:after {
                content: '\002B';
                color: #777;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }

            tr.accordion.active:after {
                content: "\2212";
            }

        tr.panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>    
</head>
    <body>
    <?php
    include("info.php");
    $query = "SELECT * FROM list1 ORDER BY `FName` ASC"; 
    $result = mysql_query($query);
    ?>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>URL</th>
                <th>Age</th>
                <th>Address</th>
            </tr>
         </thead>
    <!-- populate table from mysql database -->
        <?php $i=0; while($row = mysql_fetch_assoc($result)) { $i++; ?>
        
        <tbody id="accordion" class="accordion-group">
            <tr data-toggle="collapse" data-target="#name_<?php echo $i;?>" class="accordion-toggle accordion">
                <td>
                    <?php echo $row['FName'];?>
                </td>
                <td>
                    <?php echo "<a href='http://".$row['URL']."'>".$row['URL']."</a>"?>

                </td>
                <td>
                    <?php echo $row['Age'];?>
                </td>
                <td>
                    <?php echo $row['Address'];?>
                </td>
            </tr>
            <tr class="panel">
                <td colspan="6" class="hiddenRow">
                    <div class="accordian-body collapse" id="name_<?php echo $i;?>">
                        <?php echo $row['Description'];?>
                    </div>
                </td>
            </tr>
        </tbody>
            <?php }?>
       
    </table>
    <script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var tr = this.nextElementSibling;
	  if (tr.style.maxHeight){
  	  tr.style.maxHeight = null;
    } else {
  	  tr.style.maxHeight = tr.scrollHeight + 'px';
    }
  }
}
    </script>
</body>

＆＃13;

表手风琴使用PHP和MySQL

1 个答案: