I have the following markup,
<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
data-mode="columntoggle" data-role="table" style=
"overflow-x: scroll !important;">
<thead>
<tr>
<th class="ui-table-priority-6" data-colstart="1"
data-priority="6" style="font-weight: bold;">SL</th>
<th class="ui-table-priority-6" data-colstart="2"
data-priority="6" style="font-weight: bold;">Cat</th>
<th class="ui-table-priority-6" data-colstart="3"
data-priority="6" style="font-weight: bold;">Brand</th>
<th class="ui-table-priority-6" data-colstart="4"
data-priority="6" style="font-weight: bold;">Product</th>
<th class="ui-table-priority-persist" data-colstart="5"
data-priority="persist" style="font-weight: bold;">Item
Code</th>
<th class="ui-table-priority-persist" data-colstart="6"
data-priority="persist" style="font-weight: bold;">Model
Number</th>
<th class="ui-table-priority-6" data-colstart="7"
data-priority="6" style="font-weight: bold;">Bundle Value</th>
<th class="ui-table-priority-persist" data-colstart="8"
data-priority="persist" style="font-weight: bold;">Old RSP</th>
<th class="ui-table-priority-persist" data-colstart="9"
data-priority="persist" style="font-weight: bold;">Promo
RSP</th>
<th class="ui-table-priority-6" data-colstart="10"
data-priority="6" style="font-weight: bold;">Reduced %age</th>
<th class="ui-table-priority-6" data-colstart="11"
data-priority="6" style="font-weight: bold;">Start Date</th>
<th class="ui-table-priority-6" data-colstart="12"
data-priority="6" style="font-weight: bold;">Vendor End
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-table-priority-6">
<p>A115</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Panasonic</p>
</td>
<td class="ui-table-priority-6">
<p>Blender</p>
</td>
<td class="ui-table-priority-persist">
<p>11651099</p>
</td>
<td class="ui-table-priority-persist">
<p>MXAC400</p>
</td>
<td class="ui-table-priority-6">
<p>GV 50</p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 399</strong></p>
</td>
<td class="ui-table-priority-persist">
<p>
<strong> 399</strong></p>
</td>
<td class="ui-table-priority-6">
<p>0%</p>
</td>
<td class="ui-table-priority-6">
<p>Feb 26th</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 8th</p>
</td>
</tr>
<tr>
<td class="ui-table-priority-6">
<p>C073</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Tefal</p>
</td>
<td class="ui-table-priority-6">
<p>Fryer</p>
</td>
<td class="ui-table-priority-persist">
<p>11480473</p>
</td>
<td class="ui-table-priority-persist">
<p>FZ700072</p>
</td>
<td class="ui-table-priority-6">
<p>PB</p>
</td>
<td class="ui-table-priority-persist">
<p><strong>999</strong></p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 749</strong></p>
</td>
<td class="ui-table-priority-6">
<p>25%</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 1st</p>
</td>
<td class="ui-table-priority-6">
<p>Will Revert</p>
</td>
</tr>
</tbody>
</table>
Can I add a horizontal markup? So that users can easily scroll right and left
You can wrap your table with div like:
<div style="width: 100%; height: 400px; overflow: auto">
<table>
<!-- table content -->
</table>
</div>
If table > window width scroll will be visible dy default.
Check CSS styles and js (jQuery Mobile can fixed the table to window width)
Also you can use div container, for example:
<div style="width:300px;overflow:auto">
<table>...</table>
</div>
The answers above worked for me; however, I didn't want to specify explicit widths or heights, so the following solved the problem even better:
<div style="overflow-x: auto;">
<table [...] </table>
</div>
Related
I am trying to generate the PDF on button click in asp.net-mvc and it's generating the data by using the .html() of the table
Here is the logic which I tried.
$(function () {
$("#btnExportPDF").click(function () {
$("input[name='GridHtml']").val($("#grdCicleDatatable_wrapper").html());
});
});
<input id="btnFilter1" type="button" value="Filter" class="button" />
#*<input id="btnExportPDF" type="button" value="Export to PDF" class="button" />*#
#using (Html.BeginForm("Export", "App", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnExportPDF" value="Export" />
}
[HttpPost]
[ValidateInput(false)]
public FileResult Export(string GridHtml)
{
using (MemoryStream stream = new System.IO.MemoryStream())
{
StringReader sr = new StringReader(GridHtml);
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 100f, 0f);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
return File(stream.ToArray(), "application/pdf", "SignOffSheet.pdf");
}
}
Here is the link from where I tried.
But I want to use an Other HTML file to bring the show the data instead of GridHtml data container.
Here is my HTML which is more precise to use
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<title>Signoffsheet PDF - Fiber Inventory Portal</title>
</head>
<body>
<table cellspacing="" cellpadding="0" width="100%" border="1" style="font-family: Arial, Helvetica, sans-serif; font-size:11px;border-collapse: collapse;">
<tbody>
<tr>
<td>
<table cellspacing="15" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="10" width="100%" border="1" style="border-collapse:collapse;">
<tbody>
<tr>
<td align="center" style="font-size:16px;">
<b>FIBER SIGNOFF SHEET</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="5" width="100%" border="0">
<tbody>
<tr>
<td align="right" width="20%"><b>Circle Name :</b></td>
<td align="left"><b>BR</b></td>
</tr>
<tr>
<td align="right"><b>SP Name :</b></td>
<td align="left"><b>NIPL</b></td>
</tr>
<tr>
<td align="right"><b>Inventory For :</b></td>
<td align="left"><b>Jun'20</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="5" width="100%" border="1" style="border-collapse:collapse;">
<thead>
<tr style="background-color:#002060;color:#ffffff;-webkit-print-color-adjust: exact;">
<th bgcolor="#002060" align="center" rowspan="3">S.No.</th>
<th bgcolor="#002060" align="center" rowspan="3">Maintenance Point</th>
<th bgcolor="#002060" align="center" colspan="8">Billable Scope Approved by CMM</th>
<th bgcolor="#002060" align="center" colspan="3">Commited Manpower</th>
</tr>
<tr bgcolor="#002060" style="background-color:#002060;color:#ffffff;-webkit-print-color-adjust: exact;">
<th bgcolor="#002060" align="center" colspan="2">Intercity</th>
<th bgcolor="#002060" align="center" colspan="2">Intracity</th>
<th bgcolor="#002060" align="center" colspan="2">Enterprise</th>
<th bgcolor="#002060" align="center" colspan="2">Overall</th>
<th bgcolor="#002060" align="center" rowspan="2">FRT</th>
<th bgcolor="#002060" align="center" rowspan="2">Fiber<br /> Supervisor</th>
<th bgcolor="#002060" align="center" rowspan="2">Patroller</th>
</tr>
<tr bgcolor="#002060" style="background-color:#002060;color:#ffffff;-webkit-print-color-adjust: exact;">
<th bgcolor="#002060" align="center">Aerial</th>
<th bgcolor="#002060" align="center">UG</th>
<th bgcolor="#002060" align="center">Aerial</th>
<th bgcolor="#002060" align="center">UG</th>
<th bgcolor="#002060" align="center">Aerial</th>
<th bgcolor="#002060" align="center">UG</th>
<th bgcolor="#002060" align="center">Aerial</th>
<th bgcolor="#002060" align="center">UG</th>
</tr>
</tbody>
<tbody>
<tr>
<td align="center" width="4%">1</td>
<td align="center" width="19%">Arrah</td>
<td align="center" width="7%">-</td>
<td align="center" width="7%">752.15</td>
<td align="center" width="7%">-</td>
<td align="center" width="7%">89.6</td>
<td align="center" width="7%">-</td>
<td align="center" width="7%">0.6</td>
<td align="center" width="7%">0.0</td>
<td align="center" width="7%">842.35</td>
<td align="center" width="7%"></td>
<td align="center" width="7%"></td>
<td align="center" width="7%"></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">Aurangabad-BH</td>
<td align="center">-</td>
<td align="center">1,651.3</td>
<td align="center">-</td>
<td align="center">104.4</td>
<td align="center">0.4</td>
<td align="center">5.0</td>
<td align="center">0.4</td>
<td align="center">1,760.7</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">3</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">4</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#002060" style="background-color:#002060;color:#ffffff;-webkit-print-color-adjust: exact;">
<td bgcolor="#002060" align="center"></td>
<td bgcolor="#002060" align="center">Total</td>
<td bgcolor="#002060" align="center">0.0</td>
<td bgcolor="#002060" align="center">14,580.8</td>
<td bgcolor="#002060" align="center">11.3</td>
<td bgcolor="#002060" align="center">2,054.8</td>
<td bgcolor="#002060" align="center">0.4</td>
<td bgcolor="#002060" align="center">16.1</td>
<td bgcolor="#002060" align="center">11.8</td>
<td bgcolor="#002060" align="center">16,651.6</td>
<td bgcolor="#002060" align="center"></td>
<td bgcolor="#002060" align="center"></td>
<td bgcolor="#002060" align="center"></td>
</tr>
</tfoot>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="5" width="100%" border="1"
style="border-collapse:collapse;">
<tbody>
<tr>
<td align="center" width="25%">SP Circle Head</td>
<td align="center" width="25%">RJIL Fiber SME</td>
<td align="center" width="25%">RJIL CMM</td>
<td align="center" width="25%">RJIL CTO</td>
</tr>
<tr>
<td align="center" height="50px"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">Signature & Date</td>
<td align="center">Signature & Date</td>
<td align="center">Signature & Date</td>
<td align="center">Signature & Date</td>
</tr>
<tr>
<td align="center" height="50px"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">Name</td>
<td align="center">Name</td>
<td align="center">Name</td>
<td align="center">Name</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
you can just use this:
<button type="button" onclick="window.print()">Print</button>
You may use Response.Redirect to view with your 'clear' table and implement your export in controller of that view.
DatePicker field is non-editable and I cannot send data using sendkeys. The only way is to click on the date. I have tried many options but nothing is working.
I want to click on tomorrow's date that's today+1 date. Please see this code:
<input id="asOfDate" name="asOfDate" placeholder="Enter Date" readonly="true" ng-model="asOfDate" class="form-control date-picker asOfDate ng-pristine ng-valid ng-valid-pattern ng-touched" type="text" ng-pattern="/^([0]?\d{1}|[1][0-2])\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([1-9]{1}\d{3}))$/" style="">
#addeventModal > div > div > div.modal-body.modal-body-height > form > div.row > div > div > span
<span ng-show="AddTimeLine.asOfDate.$error.pattern" class="text-danger ng-hide">Incorrect Format, should be MM/DD/YYYY</span>
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="cw"> </th>
<th class="prev" style="visibility: visible;">
«</th>
<th colspan="5" class="datepicker-switch">October 2017</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="cw"> </th>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cw">39</td>
<td class="old day">24</td>
<td class="old day">25</td>
<td class="old day">26</td>
<td class="old day">27</td>
<td class="old day">28</td>
<td class="old day">29</td>
<td class="old day">30</td>
</tr>
<tr>
<td class="cw">40</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="cw">41</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="cw">42</td>
<td class="day">15</td><td class="day">16</td>
<td class="day">17</td><td class="day">18</td><td class="day">19</td>
<td class="day">20</td><td class="day">21</td></tr>
<tr><td class="cw">43</td><td class="day">22</td>
<td class="day">23</td><td class="day">24</td>
<td class="day">25</td><td class="day">26</td>
<td class="day">27</td><td class="day">28</td>
</tr><tr><td class="cw">44</td><td class="day">29</td>
<td class="day">30</td><td class="day">31</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
<td class="new day">4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="8" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div>
How to write code for this?
Add days to JavaScript Date
Add a day with the help of above question
After that retrive the day
var day = todayTime.getDate();
Since you have will have only one month displayed, all dates will be unique.
So your xpath would be
//td[#class="day"][text()=day]
You should be able to click with below code
WebElement button = driver.findElement(By.xpath("//td[#class="day"][text()=day]
"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click();", button);
I suggest using javascript executor since there might be a overlay window
browser.executeScript("arguments[0].click();",element(by.xpath("[//td[#class="day"][text()=day]")).getWebElement());
Ps : here pass the current day as day variable.
I'm encountered this problem from my workplace and i kinda feel this table isn't common table for me. I want to sort this table like when i click one of the header, it got sorted from that header category. In example i have this html code:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When i click the header title in example Airline, the table got sorted from the airline like:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've already seen many javascript sort the table but it only sort the element of tbody or but i never seen any javascript that can sorting the tbody. How can i do that with javascript and without jquery
There is a bunch of stuff involved on this one.
First of all you have to attach event listeners to all your thead th items so when they are clicked they'll perform the sort action.
var airFlightTable = document.querySelector("#AirflightDetail");
var tableHeaders = airFlightTable.querySelectorAll("thead tr th");
tableHeaders.forEach(function(tableHeader){
tableHeader.addEventListener("click", onTableHeaderClick);
});
When click happens you start the sort process by gathering all tbody tags and manipulate their DOM.
function onTableHeaderClick(event){
var sortBy = event.currentTarget.innerHTML;
if(sortBy === 'Airline'){
airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){
var items = [].slice.call(tableResultsLIst.querySelectorAll("td"));
var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones
});
}
}
There is some work left for you, but you should be fine from this point. Here is a JSBin with this implementation
Im trying to pull out the data and put it in arrays with jquery for google dynamic remarketing tag.
using the css class
gr_row
values---
ecomm_prodid
ecomm_quantity
ecomm_totalvalue
Then insert them like so, if there are multiple values, if only one then no array and remove curreny symbol.
<!-multiple products in cart-->
<script type="text/javascript">
var google_tag_params =
ecomm_prodid: ["123","234"],
ecomm_pagetype: "basket",
ecomm_totalvalue: [100,50]
};
</script>
<!-single product in cart-->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 234,
ecomm_pagetype: "purchase",
ecomm_totalvalue: 120.99
};
</script>
Any help appreciated thanks
google instructions add dynamic remarketing tag
<table class="checkout-cart" border="0" cellpadding="3" cellspacing="2" width="650">
<tbody>
<tr>
<th "="" align="left" width="15%">REF</th>
<th align="left" width="45%">DESCRIPTION</th>
<th align="right" width="10%">QUANTITY</th>
<th align="right" width="10%">PRICE</th>
<th align="right" width="10%">COST</th>
<th align="center" width="10%">REMOVE</th>
</tr>
<tr class ="gr_row">
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="77"> 83 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="242">some product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_0" value="1" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td rowspan="1" class="cart" align="center"><input name="D_0" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="78"> 3571 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="241">another product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_1" value="5" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td class="cart" align="right"> £6.90 </td>
<td class="cart" align="right"> £6.90 </td>
<td rowspan="1" class="cart" align="center"><input name="D_1" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Subtotal</b></td>
<td class="cart" align="right">£12.69</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>VAT</b></td>
<td class="cart" align="right">£2.54</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td class="cartheading" align="right"><b>£15.23</b></td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
</tbody>
</table>
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');
}
});