HTML中的可扩展表视图

时间:2015-11-21 05:42:09

标签: javascript jquery html ajax expandable-table

我正在构建一个从数据库中获取和显示数据的动态表,表的结构如下所示

<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中构建了一个静态表,它工作正常,但是当我尝试将代码与上面的表合并时,它无效。谁能告诉我哪里出错了?

1 个答案:

答案 0 :(得分:0)

试试这个JS Fiddle并希望它能够正常工作,我在td内添加了虚拟文字,然后点击td切换子div {{{{{{ 1}}

&#13;
&#13;
.hidden
&#13;
$(document).ready(function () {
    $('.expandable').on('click', function(){
    	$(this).children('.hidden').toggle();
    });
});
&#13;
.hidden {
    display:none;
}
&#13;
&#13;
&#13;