jQuery selector exclude child table - javascript

Here is the jQuery script try to remove the first column of a html table
var order_table = $('.hor-scroll').eq(1);
//alert(order_table.html());
var order_table_copy = order_table;
order_table_copy.find(".order-tables th:first-child").remove();
order_table_copy.find(".order-tables td:first-child").remove();
but above script also remove the th, td of qty-table
the html
<table cellspacing="0" class="data order-tables" style="width: 100%;">
<colgroup>
<col>
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
</colgroup>
<thead>
<tr class="headings">
<th width="1">Localisation</th>
<th>Image</th>
<th>Product</th>
<th>Sku</th>
<th><span class="nobr">Item Status</span></th>
<th>Unit Price</th>
<th class="a-center">Qty</th>
<th>Subtotal</th>
<th>Marge</th>
</tr>
</thead>
<tbody class="even">
<tr class="border">
<td class="a-left"></td>
<td class="a-center">
<img src="" width="100px">
</td>
<td class="a-left">Laser Pants</td>
<td class="a-left">test</td>
<td class="a-center">Mixed</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$64.99</span>
</span>
<br>
</td>
<td>
<table cellspacing="0" class="qty-table">
<tbody>
<tr>
<td>Ordered</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Invoiced</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Refunded</td>
<td><strong>9</strong></td>
</tr>
</tbody>
</table>
</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$6,499.00</span>
</span>
<br>
</td>
<td class="a-center">
0<span>%</span>
</td>
</tr>
</tbody>
<tbody class="odd">
<tr class="border">
<td class="a-left"></td>
<td class="a-center">
<img src="" width="100px">
</td>
<td class="a-left">Laser Hoody</td>
<td class="a-left">test</td>
<td class="a-center">Invoiced</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$84.99</span>
</span>
<br>
</td>
<td>
<table cellspacing="0" class="qty-table">
<tbody>
<tr>
<td>Ordered</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Invoiced</td>
<td><strong>100</strong></td>
</tr>
</tbody>
</table>
</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$8,499.00</span>
</span>
<br>
</td>
<td class="a-center">
0<span>%</span>
</td>
</tr>
</tbody>
</table>
but i can't exclude the qty-table, i had tried so many different but not work.

Try order_table_copy.find(".order-tables th:first-child:not(.qty-table)")
Also look into :first-of-type. And also remember that jQuery selectors returns an array. So if all else fails, you can always use the js filter function of arrays.
Update: To avoid the td the the .qty-table, make sure that the selected td is not a td under the .qty-table
order_table_copy.find(".order-tables tr td:first-child:not(.qty-table td)").remove();

Related

How to hide parent table based on child table style visibility

I have a html as below and basically it contains main table with class as <table class="customFormTable block" and this in turn contains some tables like <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
So i want jQuery/javascript to scan for parent table with class table customFormTable and find if any children has table with style="visibility: hidden;", if so hide the parent table i.e table customFormTable
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody><tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody><tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
first change id from 'elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)' to anything else like 'elementTableContainerCheckHidden'
Because jquery throw error while parsing () contains id name.
Try below solution which gives you true / false for elementTableContainerCheckHidden for hidden visibility
if ($('.customFormTable')
.find('#elementTableContainerCheckHidden').css("visibility") === "hidden") {
$('.customFormTable').hide(); //hide your parent table
}
Hello
which table do you want to hide ? You can try to use jQuery like this
$("yourSelector").find(' + "yourTarget"').event("");
"yourSelector" , that means ID/Class which is the child or your selector
"yourTarget" , that means your parent of the selector or your target
"event", means hide()/addClass() like this or your event
I hope you can try this
$("yourSelector").find(' + "yourTarget"').addClass("yourClass");
and by the help of css you can easily done you wish.
OR
$("yourSelector").find(' + "yourTarget"').hide();
is very helpful I hope
you need to traverse all tds and find table element.
$(document).ready(function(){
var tds=$(".customFormTable tbody tr td")
$.each(tds,function(){
var htmls=$.parseHTML($(this).html())
$.each(htmls,function(i,o){
if(o.outerHTML)
if(o.outerHTML.indexOf("table")){
console.log(o.style.visibility)
if(o.style.visibility=='hidden' || o.style.display=='none')
console.log(o)
$(".customFormTable").hide();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody>
<tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

How to colspan tr table from the start of the table

i want to start the colspan from the second column i mean from the name:
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
</tbody>
please can anyone tell me how i can colspan from the name??
It seems all you need is to add a <td> to the row. You have :
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
Change it to:
<tr ng-if="device.expanded" ng-repeat-end="">
<td style="width: 30px;"></td>
<td colspan="5">gfhgfjhfjtjrtkjy</td>
</tr>
This should add a <td> beneath the plus/minus icon. Additionally, you can style this <td> if you do not intent it to be appear as a column ( which I think is your intent).
Hope that helps.
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td colspan="2" align="center"><p>{{device.name}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>

Javascript :not selector not working

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?
The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>
After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}

How do I implement HTML table sorting when table is populated via Struts

I have a HTML table in which the elements are populated via struts (the <s:iterator> tag). The code snippet is shown below.
<table cellspacing="0" border="0" width="100%" class="select_table margin-top10" id="example_table">
<thead>
<tr class="oddRows">
<th width="300px" align="left">Column A</th>
<th width="150px" align="left">Column B</th>
<th width="120px"align="left">Column C</th>
<th align="left">Action</th>
</tr>
</thead>
</table>
<div style="height:200px;" class="data_holder">
<table class="select_table" cellspacing="0" cellpadding="0" border="0" style="width: 670px;">
<tbody>
<s:iterator value="exampleList" status="searchResultStatus">
<tr id="exampleRow-<s:property value="#searchResultStatus.index"/>" <s:if test="#searchResultStatus.even">class="oddRows"</s:if> >
<td id="sName<s:property value="#searchResultStatus.index"/>" width="295px"><span id="scheduleName<s:property value="#searchResultStatus.index"/>" class="ellipsis35" title="<s:property value="exampleName"/>"><s:property value="exampleName"/></span></td>
<td id="sType<s:property value="#searchResultStatus.index"/>" width="150px"><span id="sType<s:property value="#searchResultStatus.index"/>"><s:property value="exampleType" /></span></td>
<td id="sLevel<s:property value="#searchResultStatus.index"/>"><span id="sLevel<s:property value="#searchResultStatus.index"/>"><s:property value="exampleLevel" /></span></td>
<td width="10%"><div title="Click to select" id="select-contact-<s:property value="#searchResultStatus.index"/>" ><img id="select-contact-<s:property value="#searchResultStatus.index"/>" src="../images/popup-select.gif"></div></td>
</tr>
</s:iterator>
</tbody>
</table>
How do I implement sorting on this table? Please help!
You can do it using struts2 s:sort tag.
<s:sort comparator="your.impl.of.comparator" source="exampleList">
<s:iterator status="searchResultStatus">
<tr id="exampleRow-<s:property value="#searchResultStatus.index"/>" <s:if test="#searchResultStatus.even">class="oddRows"</s:if> >
<td id="sName<s:property value="#searchResultStatus.index"/>" width="295px"><span id="scheduleName<s:property value="#searchResultStatus.index"/>" class="ellipsis35" title="<s:property value="exampleName"/>"><s:property value="exampleName"/></span></td>
<td id="sType<s:property value="#searchResultStatus.index"/>" width="150px"><span id="sType<s:property value="#searchResultStatus.index"/>"><s:property value="exampleType" /></span></td>
<td id="sLevel<s:property value="#searchResultStatus.index"/>"><span id="sLevel<s:property value="#searchResultStatus.index"/>"><s:property value="exampleLevel" /></span></td>
<td width="10%"><div title="Click to select" id="select-contact-<s:property value="#searchResultStatus.index"/>" ><img id="select-contact-<s:property value="#searchResultStatus.index"/>" src="../images/popup-select.gif"></div></td>
</tr>
</s:iterator>
</s:sort>
Where your.impl.of.comparator is an implementation of java.util.Comparator

How to move table to the top of the DIV container based on a Condition with JQuery?

I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.
$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example
$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});

Categories