jquery not(:contains) not working with nested html table -
i have nested html table column 4 nested html table.
i filtering records based on criteria provided , coloring invalid records red.
this jquery solution works when remove nested html table html table inside td seems not working.
can please suggest why? appreciated.
<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");
try use more specific selector rule - child selector instead of descendant.
you should iterate on direct tr children of outer table, not trs of inner table should not use descendant selector tr element.
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>
Comments
Post a Comment