Javascript 如何在每列末尾显示“显示隐藏”选项

在这里，我想在table列的末尾显示show和hide函数，它现在显示在列的顶部。它使用表的第一列作为父列，并在第一列显示“显示”和“隐藏”

<div class="col-lg-12" style="width: 100%"

          <div class="panel panel-default">
            <div class="panel-body">
<table class="table table-condensed"
style="border-collapse:collapse;">

<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse" 
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
    <td> /%DADRVC%/ </td>
    <td> /%NMEFRS%/ </td>
    <td> /%PHNCEL%/ </td>
    <td> /%DAACCO%/ </td>
    <td> /%DACNT#%/ </td>
    <td> /%DAORDT%/ </td>
    <td> /%DASTRD%/ </td>
    <td> /%DASTRT%/ </td>
    <td> /%DASAFR%/ </td>
    <td> /%DASATO%/ </td>
    <td> /%DAORDS%/ </td>
</tr>
   <tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" 
id="DADRVC"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<div class="">
&nbsp;&nbsp;&nbsp;  <button type="button" 
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
&nbsp;&nbsp;<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
 <button type="button" class="btn btn-default btn-md btn3d">
  <span class="glyphicon glyphicon-cloud"></span> Update App</button>
 <button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
 <input type="text" class="col-sm-4"/>

</div></thead></table>
    </div>
        </td></tr>
        <tr data-toggle="collapse" 
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
    <td> /%DADRVC%/ </td>
    <td> /%NMEFRS%/ </td>
    <td> /%PHNCEL%/ </td>
    <td> /%DAACCO%/ </td>
    <td> /%DACNT#%/ </td>
    <td> /%DAORDT%/ </td>
    <td> /%DASTRD%/ </td>
    <td> /%DASTRT%/ </td>
    <td> /%DASAFR%/ </td>
    <td> /%DASATO%/ </td>
    <td> /%DAORDS%/ </td>
</tr>
   <tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" 
id="DADRVC"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<div class="">
&nbsp;&nbsp;&nbsp;  <button type="button" 
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
&nbsp;&nbsp;<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
 <button type="button" class="btn btn-default btn-md btn3d">
  <span class="glyphicon glyphicon-cloud"></span> Update App</button>
 <button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
 <input type="text" class="col-sm-4"/>

</div></thead></table>
    </div>
        </td></tr>
        <tr data-toggle="collapse" 
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
    <td> /%DADRVC%/ </td>
    <td> /%NMEFRS%/ </td>
    <td> /%PHNCEL%/ </td>
    <td> /%DAACCO%/ </td>
    <td> /%DACNT#%/ </td>
    <td> /%DAORDT%/ </td>
    <td> /%DASTRD%/ </td>
    <td> /%DASTRT%/ </td>
    <td> /%DASAFR%/ </td>
    <td> /%DASATO%/ </td>
    <td> /%DAORDS%/ </td>
</tr>
   <tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" 
id="DADRVC"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<div class="">
&nbsp;&nbsp;&nbsp;  <button type="button" 
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
&nbsp;&nbsp;<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
 <button type="button" class="btn btn-default btn-md btn3d">
  <span class="glyphicon glyphicon-cloud"></span> Update App</button>
 <button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
 <input type="text" class="col-sm-4"/>

</div></thead></table>
    </div>
        </td></tr>

---

这就是为什么要将所有内容都放在thead标记中，您需要使用标记tfoot将显示/隐藏函数放在表的页脚中。像这样：



支原体头
霉菌含量
显示

只需将列移动到行的末尾，如下所示：



我想你不明白我的问题。我想在列的末尾显示“显示”和“隐藏”选项。我使用了tfoot，但没有working@Ajay_Venkatesh你是说“在这一排的尽头”吗？在列的末尾是在底部（即向下）-此答案将正确放置您的按钮。从措辞和注释来看，您的意思是“在行的末尾”-即横过，而不是列（将向下）。请在问题中作出相应澄清。