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

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

这是我的完整代码：

<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>";

$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
$（#示例tbody'）。在（'click'，'tr'，function（）{
var name=$（'td'，this）.eq（0）.text（）；
} );
} );
名字
姓
单位
位置
地位
套件类型
如注释中所述，仅在表中抛出div是无效的。这对浏览器来说毫无意义。要完成您想要做的事情，您需要在最后一个
元素之后关闭行，然后打开一个新行，为它指定一个跨越整行的
td
，然后将所需的div放入该
td
元素中。通过这种方式，html呈现程序将理解div应该如何适应表结构。
如注释中所述，仅在表中抛出div是无效的。这对浏览器来说毫无意义。要完成您想要做的事情，您需要在最后一个
元素之后关闭行，然后打开一个新行，为它指定一个跨越整行的
td
，然后将所需的div放入该
td
元素中。通过这种方式，html呈现程序将理解div应该如何适应表结构。
如注释中所述，仅在表中抛出div是无效的。这对浏览器来说毫无意义。要完成您想要做的事情，您需要在最后一个
元素之后关闭行，然后打开一个新行，为它指定一个跨越整行的
td
，然后将所需的div放入该
td
元素中。通过这种方式，html呈现程序将理解div应该如何适应表结构。
如注释中所述，仅在表中抛出div是无效的。这对浏览器来说毫无意义。要完成您想要做的事情，您需要在最后一个
元素之后关闭行，然后打开一个新行，为它指定一个跨越整行的
td
，然后将所需的div放入该
td
元素中。通过这种方式，html呈现程序将理解div应该如何适应表结构。
ps：您可以用
替换
，从编写开始，你不能在那里放一个div。@Quentin我需要做什么？@Quentin如果我使用
，那么它也会在顶部显示隐藏的内容。@KunJ感谢你编辑我的问题标题。ps：你可以用
替换
，从写作开始，你不能在那里放一个div。@Quentin我需要做什么？@Quentin如果我使用
，那么它也会在顶部显示隐藏的内容。@KunJ感谢你编辑我的问题标题。ps：你可以用
替换
，从写作开始，你不能在那里放一个div。@Quentin我需要做什么？@Quentin如果我使用
，那么它也会在顶部显示隐藏的内容。@KunJ感谢你编辑我的问题标题。ps：你可以用
替换
，从写作开始，你不能在那里放一个div。@Quentin我需要做什么？@Quentin如果我使用
，那么它也会在顶部显示隐藏的内容。@KunJ谢谢你编辑我的问题标题。谢谢你的好主意。你能给我举个例子吗？我在关闭第一个
td
后使用了
。但它仍然在顶部显示隐藏的内容。您是否将div放在
中？它应该是
/*您的隐藏div*/
。我正在更新我的问题，请检查它。我认为没有办法在表的行之间填充额外的内容，并且仍然可以对行进行排序。我可能错了，我当然不是引导专家，但在我看来，这取决于您的表是一个非常正常的表这一假设。您可能需要研究一个更强大的表API——我知道Datatables是一个可以做您想做的事情并具有引导集成的API。看这里：谢谢你的好主意。你能给我举个例子吗？我在关闭第一个
td
后使用了
。但它仍然在顶部显示隐藏的内容。您是否将div放在
中？它应该是
/*您的隐藏div*/
。我正在更新我的问题，请检查它。我认为没有办法在表的行之间填充额外的内容，并且仍然可以对行进行排序。我可能错了，我当然不是引导专家，但在我看来，这取决于您的表是一个非常正常的表这一假设。您可能需要研究一个更强大的表API——我知道Datatables是一个可以做您想做的事情并具有引导集成的API。看这里：谢谢你的好主意。你能给我举个例子吗？我在关闭第一个
td
后使用了
。但它仍然在顶部显示隐藏的内容。您是否将div放在
中？它应该是
/*您的隐藏div*/
。我正在更新我的问题，请检查它。我认为没有办法在表的行之间填充额外的内容，并且仍然可以对行进行排序。我可能错了，我当然不是引导专家，但在我看来，这取决于您的表是一个非常正常的表这一假设。您可能需要研究一个更强大的表API——我知道Datatables是一个可以做您想做的事情并具有引导集成的API。看这里：谢谢你的好主意。你能给我举个例子吗？我在关闭第一个
td
后使用了
。但是