phpとMySQLを使ったテーブルアコーディオン

私はデータベースから得られたデータに対してアコーディオンテーブルを作ろうとしています。 rowをクリックした後、下の行に説明データを表示したいだけです。私が見つけた多くのコードを変更してみました。phpとMySQLを使ったテーブルアコーディオン

例：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>

あなたの助けをいただき、ありがとうございます。

出典

2017-01-17 Mr. T

を使用して "解決" するために管理？あなたは働いているかどうかわからない。 –

私はこのようなテーブルアコーディオンを作成しようとしています：http://jsfiddle.net/XE6AG/2/ mysqlデータベースからのデータです。私がscirptを編集すると、phpを追加します。mysqlは表示されているようなものですが、動作しません。テーブルのすべての行が印刷されます（何も隠されていません）が、上記の行をクリックするまで、説明行を非表示にします。 –

私はあなたが投稿何に問題が何であるか、それはブートストラップ

<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; 
 
\t if (tr.style.maxHeight){ 
 
    \t tr.style.maxHeight = null; 
 
    } else { 
 
    \t tr.style.maxHeight = tr.scrollHeight + 'px'; 
 
    } 
 
    } 
 
} 
 
    </script> 
 
</body>

出典

2017-01-20 18:31:26

phpとMySQLを使ったテーブルアコーディオン

答えて

関連する問題