我正在使用允许用户在表格行中搜索字符串的搜索。如果该行不包含该字符串，则它将被隐藏。
但是，我正在使用Bootstrap的可折叠手风琴：http://getbootstrap.com/javascript/#collapse-example-accordion
我希望能够计算每组标题中显示的行数。但我的总数似乎在连接。你可以看到一些部分有多个表，所以我只计算行数。
我是Jquery的新人。我还不知道它的全部力量，所以对此表示感谢。
我的代码：
/*
1. Get users search string & Display only rows that match
2. Display how many results are in each
*/
$( document ).ready(function() {
// on search display the relevant rows
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("tr").each(function(index) {
$row = $(this);
var id = $row.find("td:first").text().toLowerCase();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
});
countRows();
});
});
function countRows() {
$(".panel-catalog").each(function(){
// count the rows in all tables under each .panel-catalog that weren't hidden from the above code.
var total = $(this).find('tr').length;
// add count next to title
$(this).find('.rowcount').text(total);
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="form-inline">
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search" name="search">
</div>
</div>
<div class="panel-group accordion-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#procedures" aria-expanded="true" aria-controls="procedures">
<i class="fa fa-caret-right"></i>
Procedures <span class="rowcount"></span> </a>
</h4>
</div>
<div id="procedures" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Alpha-Amino Nitrogen by NOPA</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Alpha-Amino-Nitrogen-by-NOPA0821081.pdf" target="_blank">Alpha-Amino Nitrogen by NOPA</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 86 kB</td>
</tr>
<tr>
<td style="display:none;">Brix: Hydrometer and Refractometer</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Brix-Hydrometer-and-Refractometer0818081.pdf" target="_blank">Brix: Hydrometer and Refractometer</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 43 kB</td>
</tr>
<tr>
<td style="display:none;">Cold and Heat Stability</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-Cold-and-Heat-Stability0818081.pdf" target="_blank">Cold and Heat Stability</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Color (Wine, Juice, and Concentrate)</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Color-Wine-Juice-Concentrate0818081.pdf" target="_blank">Color (Wine, Juice, and Concentrate)</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Managing 'Stuck' Malolactic Fermentations with Viniflora®</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Managing-Stuck-MLF-with-Viniflora-11.091.pdf" target="_blank">Managing 'Stuck' Malolactic Fermentations with Viniflora®</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 87 kB</td>
</tr>
<tr>
<td style="display:none;">Pectinase Enzyme Analysis</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Pectinase-Enzyme-Analysis0818081.pdf" target="_blank">Pectinase Enzyme Analysis</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 25 kB</td>
</tr>
<tr>
<td style="display:none;">pH Determination</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-pH-Determination0818081.pdf" target="_blank">pH Determination</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 24 kB</td>
</tr>
<tr>
<td style="display:none;">Restarting Stuck and Sluggish Fermentations</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Restarting-Stuck-and-Sluggish-Fermentation1.pdf" target="_blank">Restarting Stuck and Sluggish Fermentations</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 524 kB</td>
</tr>
<tr>
<td style="display:none;">RS Determination Using Clinitest Tabs</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/RS-Determination-Clinitest-Tabs0818081.pdf" target="_blank">RS Determination Using Clinitest Tabs</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 32 kB</td>
</tr>
<tr>
<td style="display:none;">SO2 (Free) Ripper Procedure</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/SO2-Free-Ripper-Procedure0818081.pdf" target="_blank">SO2 (Free) Ripper Procedure</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Sulfide Dectection Kit Instructions</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Sulfide-Detection-Kit-Instructions1.pdf" target="_blank">Sulfide Dectection Kit Instructions</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 65 kB</td>
</tr>
<tr>
<td style="display:none;">Total Acidity (TA) Procedure</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-TA-Total-Acidity0818081.pdf" target="_blank">Total Acidity (TA) Procedure</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 28 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads END -->
<!-- <a href="http://privateurl.com/downloads/procedures/" class="btn btn-primary">View ALL forms & downloads for Procedures.</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#technical-data-sheets" aria-expanded="false" aria-controls="technical-data-sheets" class="collapsed" ;="">
<i class="fa fa-caret-right"></i>
Technical Data Sheets </a>
</h4>
</div>
<div id="technical-data-sheets" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"><span class="rowcount"></span>
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<!-- Display Downloads END -->
<ul class="list-unstyled">
<li>
<h4>Enological Tannins</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Grap'tan E Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-E-Data-Sheet1.pdf" target="_blank">Grap'tan E Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 67 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan PC Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-PC-Data-Sheet1.pdf" target="_blank">Grap'tan PC Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 65 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan S Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-S-Data-Sheet1.pdf" target="_blank">Grap'tan S Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 63 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan V Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-V-PDS1.pdf" target="_blank">Grap'tan V Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 337 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Enzymes</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Bioseutica Lysozyme Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/lysozyme_sheet_v5_HR1.pdf" target="_blank">Bioseutica Lysozyme Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 421 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Filtration</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Carbac-PDS-0615111.pdf" target="_blank">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 316 kB</td>
</tr>
<tr>
<td style="display:none;">Cellu-Flo FB PDS 100411</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Cellu-Flo040309.pdf" target="_blank">Cellu-Flo FB PDS 100411</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 3 MB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Fining Agents</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>KICK Carrageenan Kettle Finings</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Malolactic Bacteria, Fermentation Nutrition and Aids</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>MicroElements Nutrients</h4>
<!-- Display Downloads Sub BEGIN -->
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast Nutrition</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
</ul>
<!-- <a href="http://privateurl.com/forms-downloads/" class="btn btn-primary">View ALL forms & downloads for .</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;="">
<i class="fa fa-caret-right"></i>
Application Briefs </a>
</h4>
</div>
<div id="application-briefs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<!-- Display Downloads END -->
<ul class="list-unstyled">
<li>
<h4>Brewing Color</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Filter Cartridges</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
</ul>
<!-- <a href="http://privateurl.com/downloads/application-briefs/" class="btn btn-primary">View ALL forms & downloads for Application Briefs.</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
$(document).ready(function() {
//first cashe the rows and panels. if they are not dynamically added
//or created to the page, this saves some dom lookups and increases performance
var $allRows = $("tr");
var $panels = $(".panel-catalog");
// on search display the relevant rows
$("#search").on("input", function() {
//get the value, no need to wrap it
var value = this.value.toLowerCase();
//assume everything doesn't match, hide everything
$allRows.hide();
//find all the things that do match, that we need to show
$allRows.filter(function(index){
//instead of doing $(this) we can use eq() to get the already wrapped element
var $row = $allRows.eq(index);
//here we find the first cell and get the text of it to compare against
//if the indexOf returns > -1 it will return true which will cause the
//element to be returned from the filter to be operated on (to show it)
return ( $row.find('td:first').text().toLowerCase().indexOf(value) > -1 );
}).show();
//count how many rows
$panels.each(function(index) {
var $panel = $panels.eq(index);
//here there are multiple panel-title elements and you want to set the
//value of the one related to the particular panel. so we find the one
//in the panel rather than a global .panel-title fine, which would
//find them all
// :visible is a matcher that filters out any element that is not display hidden
//we set the html, rather than appending, to replace the entire value
$panel.find('.panel-title a').html( $panel.find('tr:visible').length );
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="form-inline">
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search" name="search">
</div>
</div>
<div class="panel-group accordion-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#procedures" aria-expanded="true" aria-controls="procedures">
<i class="fa fa-caret-right"></i>
Procedures </a>
</h4>
</div>
<div id="procedures" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Alpha-Amino Nitrogen by NOPA</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Alpha-Amino-Nitrogen-by-NOPA0821081.pdf" target="_blank">Alpha-Amino Nitrogen by NOPA</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 86 kB</td>
</tr>
<tr>
<td style="display:none;">Brix: Hydrometer and Refractometer</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Brix-Hydrometer-and-Refractometer0818081.pdf" target="_blank">Brix: Hydrometer and Refractometer</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 43 kB</td>
</tr>
<tr>
<td style="display:none;">Cold and Heat Stability</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-Cold-and-Heat-Stability0818081.pdf" target="_blank">Cold and Heat Stability</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Color (Wine, Juice, and Concentrate)</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Color-Wine-Juice-Concentrate0818081.pdf" target="_blank">Color (Wine, Juice, and Concentrate)</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Managing 'Stuck' Malolactic Fermentations with Viniflora®</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Managing-Stuck-MLF-with-Viniflora-11.091.pdf" target="_blank">Managing 'Stuck' Malolactic Fermentations with Viniflora®</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 87 kB</td>
</tr>
<tr>
<td style="display:none;">Pectinase Enzyme Analysis</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Pectinase-Enzyme-Analysis0818081.pdf" target="_blank">Pectinase Enzyme Analysis</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 25 kB</td>
</tr>
<tr>
<td style="display:none;">pH Determination</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-pH-Determination0818081.pdf" target="_blank">pH Determination</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 24 kB</td>
</tr>
<tr>
<td style="display:none;">Restarting Stuck and Sluggish Fermentations</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Restarting-Stuck-and-Sluggish-Fermentation1.pdf" target="_blank">Restarting Stuck and Sluggish Fermentations</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 524 kB</td>
</tr>
<tr>
<td style="display:none;">RS Determination Using Clinitest Tabs</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/RS-Determination-Clinitest-Tabs0818081.pdf" target="_blank">RS Determination Using Clinitest Tabs</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 32 kB</td>
</tr>
<tr>
<td style="display:none;">SO2 (Free) Ripper Procedure</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/SO2-Free-Ripper-Procedure0818081.pdf" target="_blank">SO2 (Free) Ripper Procedure</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 26 kB</td>
</tr>
<tr>
<td style="display:none;">Sulfide Dectection Kit Instructions</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Sulfide-Detection-Kit-Instructions1.pdf" target="_blank">Sulfide Dectection Kit Instructions</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 65 kB</td>
</tr>
<tr>
<td style="display:none;">Total Acidity (TA) Procedure</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-TA-Total-Acidity0818081.pdf" target="_blank">Total Acidity (TA) Procedure</a>
</td>
<td style="text-align:right;">
</td>
<td style="width:150px; text-align:center;">
PDF – 28 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads END -->
<!-- <a href="http://privateurl.com/downloads/procedures/" class="btn btn-primary">View ALL forms & downloads for Procedures.</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#technical-data-sheets" aria-expanded="false" aria-controls="technical-data-sheets" class="collapsed" ;="">
<i class="fa fa-caret-right"></i>
Technical Data Sheets </a>
</h4>
</div>
<div id="technical-data-sheets" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<!-- Display Downloads END -->
<ul class="list-unstyled">
<li>
<h4>Enological Tannins</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Grap'tan E Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-E-Data-Sheet1.pdf" target="_blank">Grap'tan E Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 67 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan PC Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-PC-Data-Sheet1.pdf" target="_blank">Grap'tan PC Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 65 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan S Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-S-Data-Sheet1.pdf" target="_blank">Grap'tan S Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 63 kB</td>
</tr>
<tr>
<td style="display:none;">Grap'tan V Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-V-PDS1.pdf" target="_blank">Grap'tan V Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 337 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Enzymes</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Bioseutica Lysozyme Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/lysozyme_sheet_v5_HR1.pdf" target="_blank">Bioseutica Lysozyme Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 421 kB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Filtration</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
<tbody>
<tr>
<td style="display:none;">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Carbac-PDS-0615111.pdf" target="_blank">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 316 kB</td>
</tr>
<tr>
<td style="display:none;">Cellu-Flo FB PDS 100411</td>
<td style="width:50px; text-align:center;">
<i class="fa fa-file-pdf-o"></i>
</td>
<td>
<a href="http://privateurl.com/wp-content/uploads/2015/05/Cellu-Flo040309.pdf" target="_blank">Cellu-Flo FB PDS 100411</a>
</td>
<td style="text-align:right;">
<span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span>
</td>
<td style="width:150px; text-align:center;">
PDF – 3 MB</td>
</tr>
</tbody>
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Fining Agents</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>KICK Carrageenan Kettle Finings</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Malolactic Bacteria, Fermentation Nutrition and Aids</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>MicroElements Nutrients</h4>
<!-- Display Downloads Sub BEGIN -->
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast Nutrition</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
</ul>
<!-- <a href="http://privateurl.com/forms-downloads/" class="btn btn-primary">View ALL forms & downloads for .</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel panel-catalog">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;="">
<i class="fa fa-caret-right"></i>
Application Briefs </a>
</h4>
</div>
<div id="application-briefs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<!-- Display Downloads BEGIN -->
<!-- Display Downloads END -->
<ul class="list-unstyled">
<li>
<h4>Brewing Color</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Filter Cartridges</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
<li>
<h4>Yeast</h4>
<!-- Display Downloads Sub BEGIN -->
<table class="table table-striped table-condensed">
</table>
<!-- Display Downloads Sub END -->
</li>
</ul>
<!-- <a href="http://privateurl.com/downloads/application-briefs/" class="btn btn-primary">View ALL forms & downloads for Application Briefs.</a>-->
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
@Brandi，我编辑了这个以做我认为你想要的事情。
首先，您需要在H4.panel-title中添加span标记以将数字输入。您不能只追加它。因为您需要能够在数字更改时替换它。请参阅下面的snippit中的span.rowcount。
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;="">
<i class="fa fa-caret-right"></i>
Application Briefs </a>
<span class="rowcount"></span>
</h4>
</div>
接下来，您需要使用一个类来隐藏行而不是$ row.hide（），因为您需要一种方法来计算在手风琴旋转打开时可见的行。当使用手风琴
隐藏时，使用（'：visible'）将不起作用tr.hideme { display: none; }
然后将行计数代码拉出到一个在页面加载时调用的函数和$（'search'）内的函数.on（'keyup'函数。
完整的工作代码如下所示，这里是一个小提琴，展示了它的实际效果：http://jsfiddle.net/za7pcv9t/
$(document).ready(function() {
// on search display the relevant rows
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("tr").each(function(index) {
$row = $(this);
var id = $row.find("td:first").text().toLowerCase();
if (id.indexOf(value) !== 0) {
$row.addClass('hideme');
} else {
$row.removeClass('hideme');
}
});
setRowCounts();
});
setRowCounts();
});
function setRowCounts(){
//count how many rows
$(".panel-catalog").each(function() {
// count the rows in all tables under each .panel-catalog that weren't hidden from the above code.
var total = $(this).find('tr').not('.hideme').length;
// add count next to title
$(this).find('span.rowcount').text(total);
});
}