0

データベースからデータを取得して表示する動的テーブルを構築しています。テーブルの構造は次のようになります

<table class="table" id="report">
  <thead>
    <tr>
      <th>Title</th>
      <th>Skill</th>
      <th>Area</th>
    </tr>
  </thead>

  <tbody>
    <?
      $sql="SELECT * from tablename ";
      $result= mysqli_query($con, $sql);
      if(mysqli_num_rows($result)>0) {
        while($row = mysqli_fetch_assoc($result)) {
          <tr>
            <td><? echo $title; ?></td>
            <td><? echo $skill; ?></td>
            <td><? echo $area; ?></td>
          </tr>
        }
      }
  </tbody>
</table>

ユーザーがタイトルをクリックするとビューが展開され、別のクリックで折りたたまれることを望みます。

jsfiddleで静的テーブルを作成しましたが、正常に動作していましたが、コードを上記のテーブルとマージしようとすると動作しません。誰が私がどこで間違ったのか教えてもらえますか?

4

1 に答える 1

0

このJS Fiddleを試してみてください。うまくいくことを願っています。その中にダミーテキストを追加し、tdクリックするtdと子 div の表示を切り替えます.hidden

$(document).ready(function () {
    $('.expandable').on('click', function(){
    	$(this).children('.hidden').toggle();
    });
});
.hidden {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="report" border="1" style="width:100%" >
    <tr>
        <th> First </th>
        <th> Second </th>
        <th> Third </th>
    </tr>

    <tr>
         <td class="expandable">1st title
            <div class="hidden">dummy text 1
                <br>dummy text 1
                <br>dummy text 1
                <br>
            </div>
        </td>
         <td>1</td>
         <td>1</td>
    </tr> 
    <tr>
         <td class="expandable">2st title
            <div class="hidden">dummy text 2
                <br>dummy text 2
                <br>dummy text 2
                <br>
            </div>
        </td>
         <td>2</td>
         <td>2</td>
    </tr>
</table>

于 2015-11-21T06:11:29.043 に答える