"显示"和"隐藏"选项通常捕获到表中的单个 Id

Question

在这里，当我单击字形图标时，它必须显示单个列的显示隐藏功能。现在，当我单击字形图标时，它通常仅显示第一个功能。

这是小提琴 https://jsfiddle.net/7vcqpo0t/2/

<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="#demo1" 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="demo1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<form name="form1" method="post" action="DRVAPP100C.PGM">
<input type="submit" value="Send" class="btn btn-default btn-md btn3d" name="SUBMIT">
</td>
&nbsp;
<input name=SCR type=hidden value="SM">
<input name=DRVA type=hidden value="/%DRVA%/">
<input name=DRVC type=hidden value="/%DRVC%/">
<input name=SMSTXT type=text>
</form>
<!-- &nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-default btn-md btn3d" name=SMSTXT>
SEND</button>
-->&nbsp;
<a href="DRVCNTC.PGM?&account=/%DRVA%/&driver=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Mobile App</button></a>
<a href="DRVAPP100C.PGM?scr=DT&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Show Text</button></a>
<a href="DRVAPP100C.PGM?scr=M1&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Update App</button></a>
<a href="DRVAPP100C.PGM?scr=M2&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Thank You</button></a>
<!--  <input type="text" class="col-sm-4"/> -->
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo1" 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="demo1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<form name="form1" method="post" action="DRVAPP100C.PGM">
<input type="submit" value="Send" class="btn btn-default btn-md btn3d" name="SUBMIT">
</td>
&nbsp;
<input name=SCR type=hidden value="SM">
<input name=DRVA type=hidden value="/%DRVA%/">
<input name=DRVC type=hidden value="/%DRVC%/">
<input name=SMSTXT type=text>
</form>
<!-- &nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-default btn-md btn3d" name=SMSTXT>
SEND</button>
-->&nbsp;
<a href="DRVCNTC.PGM?&account=/%DRVA%/&driver=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Mobile App</button></a>
<a href="DRVAPP100C.PGM?scr=DT&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Show Text</button></a>
<a href="DRVAPP100C.PGM?scr=M1&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Update App</button></a>
<a href="DRVAPP100C.PGM?scr=M2&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Thank You</button></a>
<!--  <input type="text" class="col-sm-4"/> -->
</thead>
</table>
</div>
</td>
</tr>

Answer 1

工作小提琴。

您必须更改重复 id 的demo1应该在第二个按钮中demo2，因为 id 在同一文档中应该是唯一的：

<div class="accordian-body collapse" id="demo2">

也更改data-target：

<tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">

<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="#demo1" 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="demo1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<form name="form1" method="post" action="DRVAPP100C.PGM">
<input type="submit" value="Send" class="btn btn-default btn-md btn3d" name="SUBMIT">
</td>
&nbsp;
<input name=SCR type=hidden value="SM">
<input name=DRVA type=hidden value="/%DRVA%/">
<input name=DRVC type=hidden value="/%DRVC%/">
<input name=SMSTXT type=text>
</form>
<!-- &nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-default btn-md btn3d" name=SMSTXT>
SEND</button>
-->&nbsp;
<a href="DRVCNTC.PGM?&account=/%DRVA%/&driver=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Mobile App</button></a>
<a href="DRVAPP100C.PGM?scr=DT&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Show Text</button></a>
<a href="DRVAPP100C.PGM?scr=M1&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Update App</button></a>
<a href="DRVAPP100C.PGM?scr=M2&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Thank You</button></a>
<!--  <input type="text" class="col-sm-4"/> -->
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2" 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="demo2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<table class="table table-striped">
<thead>
<form name="form1" method="post" action="DRVAPP100C.PGM">
<input type="submit" value="Send" class="btn btn-default btn-md btn3d" name="SUBMIT">
</td>
&nbsp;
<input name=SCR type=hidden value="SM">
<input name=DRVA type=hidden value="/%DRVA%/">
<input name=DRVC type=hidden value="/%DRVC%/">
<input name=SMSTXT type=text>
</form>
<!-- &nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-default btn-md btn3d" name=SMSTXT>
SEND</button>
-->&nbsp;
<a href="DRVCNTC.PGM?&account=/%DRVA%/&driver=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Mobile App</button></a>
<a href="DRVAPP100C.PGM?scr=DT&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Show Text</button></a>
<a href="DRVAPP100C.PGM?scr=M1&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Update App</button></a>
<a href="DRVAPP100C.PGM?scr=M2&DRVA=/%DRVA%/&DRVC=/%DRVC%/">
<button type="button" class="btn btn-default btn-md btn3d">
Thank You</button></a>
<!--  <input type="text" class="col-sm-4"/> -->
</thead>
</table>
</div>
</td>
</tr>