我有一个嵌套的HTML表，其中第4列是嵌套的HTML表。
我根据提供的标准过滤记录并将无效记录着色为红色。
这个jquery解决方案在删除嵌套的HTML表格时运行良好，但在TD内部使用HTML表格似乎无效。
有人可以建议为什么吗？任何帮助将不胜感激。
<div id="divQualCodeFuncPMType">
<table class="SetDWPParameterTabStyle">
<tbody>
<tr class="GridHeaderSystemParamter">
<td>
Map Id
</td>
<td>
Type Id
</td>
<td>
Material Type
</td>
<td>
Attributes
</td>
</tr>
<tr>
<td>
<span id="Label1">10</span>
</td>
<td>
<span id="Label2">60</span>
</td>
<td>
<span id="Label3">Paper</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label4">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label5">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label6">20</span>
</td>
<td>
<span id="Label7">70</span>
</td>
<td>
<span id="Label8">Box</span>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label9">60% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label10">40% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label11">20</span>
</td>
<td>
<span id="Label12">70</span>
</td>
<td>
<span id="Label13">Wood</span>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label14">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label15">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Span1">20</span>
</td>
<td>
<span id="Span2">70</span>
</td>
<td>
<span id="Span3">Wood</span>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Span4">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Span5">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Span6">20</span>
</td>
<td>
<span id="Span7">70</span>
</td>
<td>
<span id="Span8">Wood</span>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Span9">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Span10">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
var x = "Box";
var y = "80";
var $el = $('#divQualCodeFuncPMType > table tbody tr:gt(0)').filter(function(){
return $(this).find('td:nth-child(3) span:not(:contains("' + x + '"))').length || $(this).find('td:nth-child(4) span:not(:contains("' + y + '"))').length;
});
$el.css("color", "red");
答案 0 :(得分：1)
尝试使用更具体的选择器规则 - 子选择器而不是后代。
您应该仅迭代外部表的直接tr子项，而不是内部表的tr，因此不应使用tr元素的后代选择器。
var x = "Box";
var y = "80";
var $el = $('#divQualCodeFuncPMType > table > tbody > tr:gt(0)').filter(function() {
return !$(this).find('td:nth-child(3) span:contains("' + x + '")').length || !$(this).find('> td:nth-child(4) span:contains("' + y + '")').length;
});
$el.css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divQualCodeFuncPMType">
<table class="SetDWPParameterTabStyle">
<tbody>
<tr class="GridHeaderSystemParamter">
<td>
Map Id
</td>
<td>
Type Id
</td>
<td>
Material Type
</td>
<td>
Attributes
</td>
</tr>
<tr>
<td>
<span id="Label1">10</span>
</td>
<td>
<span id="Label2">60</span>
</td>
<td>
<span id="Label3">Paper</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label4">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label5">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label6">20</span>
</td>
<td>
<span id="Label7">70</span>
</td>
<td>
<span id="Label8">Box</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label9">60% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label10">40% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label11">30</span>
</td>
<td>
<span id="Label12">80</span>
</td>
<td>
<span id="Label13">Wood</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Label14">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Label15">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Span1">40</span>
</td>
<td>
<span id="Span2">90</span>
</td>
<td>
<span id="Span3">Tin</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Span4">30% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Span5">70% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Span6">50</span>
</td>
<td>
<span id="Span7">50</span>
</td>
<td>
<span id="Span8">Box</span>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<span id="Span9">80% cotton</span>
</td>
</tr>
<tr>
<td>
<span id="Span10">20% cotton</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
答案 1 :(得分：0)
问题在于使用后代选择器而不是直接子项：
e.g。
> table tbody tr:gt(0)
而不是
> table > tbody > tr:gt(0)
否则它将包括任何后代中的任何tbody中的所有第一行。
同样适用于
td:nth-child(3) span:not(:contains("' + x + '"))
应该是
> td:nth-child(3) > span:not(:contains("' + x + '"))
以及最后一个选择器：
> td:nth-child(4) span:not(:contains("' + y + '"))
需要
> td:nth-child(4) > span:not(:contains("' + y + '"))