我有一个带有2个选项元素的简单表单。当用户点击“显示结果”按钮时，它将根据输入的月份和/或年份隐藏某些表格行。因此，例如，11月和2014年是选定的选项，单击按钮，它应显示其字符串与其匹配的行，并隐藏那些不符合条件的行。我尝试过将每个td行放入每个月的ID，但这非常多余，因为列表会增长。我还分别尝试了月和年的startsWith（）和endsWith（）。
$("figure.col-sm-3").each(function () {
var getMonth = document.getElementById('table').getElementsByTagName('tr')[3].getElementsByTagName('td').startsWith("November");
$("figure.col-sm-3").hide;
$(getMonth).show;
)
});
<section class="container">
<div class="row">
<!-- FORM AREA -->
<p>Show items by:</p>
<form class="form-horizontal">
<div class="form-group">
<label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
<div class="col-sm-10">
<select class="form-control" id="inputMonth">
<option value="none"> - </option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputYear" class="col-sm-2 control-label">Select Year</label>
<div class="col-sm-10">
<select class="form-control" id="inputYear">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Show results</button>
</div>
</div>
</form>
</div>
</section>
<section class="container">
<div class="row"> <!-- FIRST SET OF ITEMS -->
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 1</h6>
<img src="img1.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>36</td>
</tr>
<tr>
<td>Sold on</td>
<td>November 7, 2014</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 2</h6>
<img src="img2.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>36</td>
</tr>
<tr>
<td>Sold on</td>
<td>December 2, 2014</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase"Item 3</h6>
<img src="img3.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>L</td>
</tr>
<tr>
<td>Sold on</td>
<td>February 19, 2015</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 4</h6>
<img src="img4.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>XL</td>
</tr>
<tr>
<td>Sold on</td>
<td>February 19, 2015</td>
</tr>
</table>
</figure>
</div>
</section>
答案 0 :(得分：2)
您可以使用此代码。它实际上不是startsWith或endsWith，但我不知道这是如何必要的：日期只有一年，一个月。两者之间没有混淆，所以仅仅是＃11; 11月和＃34;意味着它是一个匹配。要求＆＃34; 11月＆＃34;出现在开始时似乎有点矫枉过正。这一年也是如此。
因此，考虑到这一点，使用jQuery＆＃39; :contains将会这样做：
$('.btn-primary').click(function() {
var month = $('#inputMonth').val();
if (month == 'none') month = '';
var year = $('#inputYear').val();
$('div.row').show(); // show all "rows"
$('figure.col-sm-3')
.hide() // hide all of them, and then show if both `has` are true
.has('tr:last-child>td:last-child:contains(' + year + ')')
.has('tr:last-child>td:last-child:contains(' + month + ')')
.show();
// hide any rows that have no more visible figures
$('div.row:has(figure):not(:has(figure:visible))').hide();
return false; // to avoid that button submits the form
});
$('.btn-primary').click(function() {
var month = $('#inputMonth').val();
if (month == 'none') month = '';
var year = $('#inputYear').val();
$('div.row').show(); // show all "rows"
$('figure.col-sm-3')
.hide() // hide all of them, and then show if both `has` are true
.has('tr:last-child>td:last-child:contains(' + year + ')')
.has('tr:last-child>td:last-child:contains(' + month + ')')
.show();
// hide any rows that have no more visible figures
$('div.row:has(figure):not(:has(figure:visible))').hide();
return false; // to avoid that button submits the form
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<!-- FORM AREA -->
<p>Show items by:</p>
<form class="form-horizontal">
<div class="form-group">
<label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
<div class="col-sm-10">
<select class="form-control" id="inputMonth">
<option value="none"> - </option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputYear" class="col-sm-2 control-label">Select Year</label>
<div class="col-sm-10">
<select class="form-control" id="inputYear">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Show results</button>
</div>
</div>
</form>
</div>
</section>
<section class="container">
<div class="row"> <!-- FIRST SET OF ITEMS -->
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 1</h6>
<img src="img1.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>36</td>
</tr>
<tr>
<td>Sold on</td>
<td>November 7, 2014</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 2</h6>
<img src="img2.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>36</td>
</tr>
<tr>
<td>Sold on</td>
<td>December 2, 2014</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase"Item 3</h6>
<img src="img3.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>L</td>
</tr>
<tr>
<td>Sold on</td>
<td>February 19, 2015</td>
</tr>
</table>
</figure>
<figure class="col-sm-3 thumbnail">
<h6 class="text-center text-uppercase">Item 4</h6>
<img src="img4.jpg" />
<table class="table">
<tr class="price">
<td>Price</td>
<td>250</td>
</tr>
<tr>
<td>Condition</td>
<td>new</td>
</tr>
<tr>
<td>Size</td>
<td>XL</td>
</tr>
<tr>
<td>Sold on</td>
<td>February 19, 2015</td>
</tr>
</table>
</figure>
</div>
</section>
答案 1 :(得分：0)
$("figure.col-sm-3").each(function () {
var $months = $('table tr:nth-child(3)')
.find('td:not(:contains("November"))')
.closest('tr').hide();
});
希望有所帮助！