我有以下带有单选按钮和表格的html。当“仅错误”被选中的单选按钮,我们需要hide all table rows that does not have a div with class name = ‘errorLine’
我为此写了以下代码
//Hide all rows that does not have a div with class named "errorLine"
$("#tblVisualAidResult tbody tr:not('.errorLine')").hide();
这是行不通的。我知道原因–上面的代码正在查找类名称为“ errorLine”的行;不在里面寻找一个div
我们如何修改此jQuery代码以隐藏除错误行以外的所有行?
的HTML
<div class="floatLeftGeneral">
View:</div>
<div class="floatLeftGeneral">
<input type="radio" value="All" name="viewMode" class="viewModeRadio" checked="checked">
All
<input type="radio" value="Error" name="viewMode" class="viewModeRadio">
Errors Only
</div>
</br>
<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0" style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
<thead>
<tr>
<td class="Heading3" style="width: 15%;">
Serial Number
</td>
<td class="Heading3" style="width: 30%;">
Container ID
</td>
<td class="Heading3">
Status
</td>
</tr>
</thead>
<tbody>
<tr class="Normal" style="display: table-row;">
<td style="padding-left: 5px">
1
</td>
<td>
~~3957495
</td>
<td>
Received 2 of 5 of work lot 6D20223403
</td>
</tr>
<tr class="Normal" style="display: table-row;">
<td style="padding-left: 5px">
<div class="errorLine">x<div>
</div></div></td>
<td>
~~
</td>
<td>
Case Label does not Exist
</td>
</tr>
</tbody>
</table>
jQuery的
$(document).ready(function ()
{
var viewMode = "All"
function handleLogVisibility()
{
if(viewMode == "Error")
{
alert(viewMode);
//Hide all rows that does not have a div with class named "errorLine"
$("#tblVisualAidResult tbody tr:not('.errorLine')").hide();
}
else
{
alert(viewMode);
$("#tblVisualAidResult tbody tr:not('.errorLine')").show();
}
}
//Radio button change
$('.viewModeRadio').change(function ()
{
viewMode = $(this).val();
handleLogVisibility();
});
});
您可以:not()
与:has()
选择器结合使用:
$("#tblVisualAidResult tbody tr:not(:has('.errorLine'))").hide();
然后再次显示行,您可以重复该选择器,尽管只显示所有内容更简单:
$("#tblVisualAidResult tr").show();
演示:http : //jsfiddle.net/Z86dq/29/
您可能会或可能不会发现使用.not()
方法而不是:not()
选择器来分解大选择器更具可读性:
$("#tblVisualAidResult tbody tr").not(":has('.errorLine')").hide();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句