如何在每列的末尾显示show hide选项

时间：2018-09-03 13:44:26

标签： javascript jquery html

在这里，我想在表列的末尾显示显示和隐藏功能，该功能现在显示在该列的顶部。它使用表的第一列作为父项，并在该列的第一列显示显示和隐藏。

Here the fiddle 

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

这是代码。预先感谢。

2 个答案:

答案 0 :(得分：2)

Working fiddle 。

您只需将列移动到行尾即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<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> /%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>
        <td><button class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-eye-open">
        </span></button></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="#DADRVC1" class="accordion-toggle">
        <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>
        <td><button class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-eye-open">
        </span></button></td>
      </tr>
      <tr>
        <td colspan="13" class="hiddenRow">
          <div class="accordian-body collapse" id="DADRVC1"> &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="#DADRVC2" class="accordion-toggle">
        <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>
        <td><button class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-eye-open">
        </span></button></td>
      </tr>
      <tr>
        <td colspan="13" class="hiddenRow">
          <div class="accordian-body collapse" id="DADRVC2"> &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>

答案 1 :(得分：0)

这就是为什么要将所有内容放在 thead 标记内的原因，因此需要使用标记 tfoot 将显示/隐藏功能放在表格的页脚中。像这样：

<table>
  <thead>
    <tr>
      <th>MyColumnHeader</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MyContent</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><button>show</button></td>
    </tr>
  </tfoot>
</table>

相关问题
最新问题