Question

好吧，在我的网站用户页面中，所有用户都在引导表中显示。我试图在点击该行后显示每行的隐藏内容，但是它显示了表格顶部的隐藏内容？它差不多完成了。你能告诉我我的代码有什么问题吗？

以下是我的完整代码：

<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<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 type="text/javascript" language="javascript" src="resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init"></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
$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']; 
    $fname =  $search_result['fname'];  
    $lname  = $search_result['lname'];                  
    $company  = $search_result['company'];                  
    $position  = $search_result['position'];    
    $status  = $search_result['status'];    

    echo "<tr data-toggle='collapse' data-parent='#accordion' href='#collapse$i'>";                                 
    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>";  
    ?>

    <div id="collapse<?php echo $i; ?>" class="panel-collapse collapse">
    <p>Hello print <?php echo $i; ?></p>
    </div>

    <?php
    echo "</tr>";   
}//while statement
?>

    </tbody>
</table>

更新

echo "<tr data-toggle='collapse' data-parent='#accordion' href='#collapse$i'>";                                 
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>";

echo "<tr>";                                    
echo "<td colspan='6'>";    
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse">
<p>Hello print <?php echo $i; ?></p>
</div>
<?php
echo "</td>";
echo "</tr>";

如果我使用这个新行，那么第一页是空白的，而在第二页中隐藏的div在点击一行后无效。

Answer 1

正如评论中所提到的，只是在表格中抛出div是无效的HTML使用。这对浏览器没有意义。要完成您想要做的事情，您需要在最后一个<td>元素后关闭行，然后打开一个新行，给它一个td跨越整行，然后放入您在td元素内的所需div。这样，html渲染器将理解div应该如何适应表结构。

如何使用引导程序表在每个表行下方显示div？

1 个答案: