2015-11-21 2 views
0

Я строю динамическую таблицу, которая извлекает и отображает данные из базы данных, структура таблицы выглядит следующим образомрасширяемый вид таблицы в HTML

<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, и она работала нормально, но когда я попытался объединить код с моей таблицей выше, он не работает. Кто-нибудь может рассказать, где я ошибся?

+0

Можете ли вы показать нам сгенерированный HTML без PHP? – DelightedD0D

+0

Кстати ваш исходный код можно упростить: http://jsfiddle.net/DelightedDoD/pyq67q33/1/ – DelightedD0D

+0

Также стоит отметить, что плагин [Datatables plugin] (https://www.datatables.net/examples/api /row_details.html) имеет эту функциональность из коробки и делает это довольно хорошо, если вы в состоянии/хотите использовать плагин – DelightedD0D

ответ

0

Попробуйте JS Fiddle и, надеюсь, она будет работать, я добавил фиктивный текст внутри этого td и по клику на td, что переключает видимость ребенка DIV .hidden

$(document).ready(function() { 
 
    $('.expandable').on('click', function(){ 
 
    \t $(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>

+0

, я пробовал ваш код, но не работал с моим кодом, возможно, из-за различий в структуре таблицы. вы можете попробовать один раз со структурой таблицы, которую я использую – samuel

+0

, конечно, вам нужно переструктурировать таблицу, Umm, вы имеете в виду, что вам нужно рассмотреть havng скрытый фиктивный текст в своей строке? –

+0

скрытый текст кажется прекрасным, но если вы заметили, что я использовал тег thead и tbody специально, это d только differenc, что я был в состоянии c, остальное я сделал d такой же, как и код ur, – samuel