javascript - 如何在每列末尾显示显示隐藏选项

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

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

这是代码。提前致谢。

最佳答案

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>

关于javascript - 如何在每列末尾显示显示隐藏选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52151018/

javascript - 如何在每列末尾显示显示隐藏选项

上一篇：javascript - Hyperledger-Composer:无法从事务处理器函数中访问 javaScript split()-函数

下一篇：javascript - 获取对 <a> 上的单击事件打开的选项卡的引用