如何使用引导程序表在每行下方显示隐藏的div?

时间:2014-05-07 16:29:38

标签: javascript jquery html twitter-bootstrap

在我的管理面板中,我有一个用户页面,其中所有用户都使用带有排序选项的分页选项,分页选项显示。

现在,当我点击整行时,我想在每行下方显示有关用户的更多信息,然后会出现一个包含更多信息的div框。

如何在每行下方显示此隐藏的div框?

我在html head部分使用的Javascript:

<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
    $('#example').dataTable();

    $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();

    } );
} );
</script>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Php&amp;我在html正文部分使用的HTML代码

<?php
$getUser = mysql_query("select * from members ORDER BY user_id DESC");
$num = mysql_num_rows($getUser);
?>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Company</th>
    <th>Position</th>
    <th>Status</th>
    <th>Kit type</th>                          
</tr>                          
</thead>                
<tbody>

<?php
$i = 0;
while($search_result =  mysql_fetch_array($getUser)){

    $i++;
    $uid = (int) $search_result['user_id']; 
    $email =  $search_result['email'];      
    $fname =  $search_result['fname'];  
    $lname  = $search_result['lname'];                  
    $company  = $search_result['company'];                  
    $position  = $search_result['position'];                    
    $status  = $search_result['status'];                        

    echo "<tr>";                                    
    echo "<td class='row' $class valign='top'>$fname</td>";
    echo "<td class='row' $class  valign='top'>$lname</td>";                
    echo "<td class='row' $class  valign='top'>$company</td>";
    echo "<td class='row' $class  valign='top'>$position</td>";
    echo "<td class='row' $class  valign='top'>$status</td>";
    echo "<td class='row' $class  valign='top'>$kittype</td>";      
    echo "</tr>";   
}
?>

    </tbody>    
</table>

0 个答案:

没有答案