Unable to select table inside a table in jquery - javascript

I am currently having problem selecting table inside table using jquery what i want is to select the second table inside the table as given in HTML code below. I have tried the following jquery code but when i use it adds the first tr with style="display:none;" as i wrote it down below to show the tr it selects but rather i want to select the third table tr. can anyone please help me select the right table.
Here is what i tried:
<script>
$(document).ready(function () {
$("table td:contains('NIL')").closest("tr").hide();
});
</script>
<table width="79%" border="0" cellpadding="0" cellspacing="0" height="350">
<tr style="display:none;">
<td valign="top" width="1%" bgcolor=#FFFFFF>
</td>
<td valign="top" width="78%" bgcolor=#FFFFFF>
<center>
<br><b><u>COURSE PAGE - Winter Semester 2015~16</u></b><br /><br />
<table cellspacing='0' cellpadding='4' align='center' border='1' width='95%' style='border-collapse: collapse;' bordercolor='black'>
<tr align=center bgcolor=#5A768D>
<td width=80><font color=#FFFFFF>Course Owner</font></td>
<td width=70><font color=#FFFFFF>Course Code</font></td>
<td><font color=#FFFFFF>Course Title</font></td>
<td><font color=#FFFFFF>Course Type</font></td>
<td><font color=#FFFFFF>Faculty</font></td>
<td><font color=#FFFFFF>Class Nbr(s)</font></td>
<td><font color=#FFFFFF>Slot(s)</font></td>
</tr>
<tr bgcolor='#E1ECF2'>
<td width=80 align=center>SITE</td>
<td width=70 align=center>ITE302</td>
<td>Database Systems</td>
<td>Embedded Lab</td>
<td>11543 - SARAVANAKUMAR K - SITE</td>
<td>2039</td>
<td>L29+L30</td>
</tr>
</table><br>
<table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
<tr>
<td bgcolor=#5A768D width="22%" height="30"><font color=#FFFFFF>Syllabus</font></td>
<form action='syllabus_file.asp' method='post'><td bgcolor='#EDEADE' width='75%' height='30'><input type='hidden' name='crscd' value='ITE302'><input type='hidden' name='crstp' value='ELA'><input type='hidden' name='version' value='1'><input type='submit' name='sybcmd' class='submit' value='Download'></td></form>
</tr>
<tr>
<td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
<font color=#FFFFFF>Text/Reference Material</font>
</td>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB01_DBMS_Lab_Manual.pdf' target='_blank'><font color=blue>DBMS_Lab_Manual.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB02_Structured-Query-Language.pdf' target='_blank'><font color=blue>Structured-Query-Language.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB03_students_manual.pdf' target='_blank'><font color=blue>students_manual.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
NIL
</td>
</tr>
</table><br>
<table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
<tr>
<td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
<font color=#FFFFFF>Assignments</font>
</td>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
</table><br>

Since you are targetting td of a table inside td, you need to specify table inside table as below:
$("table table td:contains('NIL')").closest("tr").hide();
or to be precise table inside td as:
$("table td table td:contains('NIL')").closest("tr").hide();
Otherwise your condition will satisfy always at very first instance and it will hide the root tr since there is NIL in table which is inside td
Make a note - I don't understand why you have added display:none; on the very first tr and I've removed that.
Sinppet
$("table table td:contains('NIL')").closest("tr").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="79%" border="0" cellpadding="0" cellspacing="0" height="350">
<tr>
<td valign="top" width="1%" bgcolor=#FFFFFF>
</td>
<td valign="top" width="78%" bgcolor=#FFFFFF>
<center>
<br><b><u>COURSE PAGE - Winter Semester 2015~16</u></b>
<br />
<br />
<table cellspacing='0' cellpadding='4' align='center' border='1' width='95%' style='border-collapse: collapse;' bordercolor='black'>
<tr align=center bgcolor=#5A768D>
<td width=80><font color=#FFFFFF>Course Owner</font>
</td>
<td width=70><font color=#FFFFFF>Course Code</font>
</td>
<td><font color=#FFFFFF>Course Title</font>
</td>
<td><font color=#FFFFFF>Course Type</font>
</td>
<td><font color=#FFFFFF>Faculty</font>
</td>
<td><font color=#FFFFFF>Class Nbr(s)</font>
</td>
<td><font color=#FFFFFF>Slot(s)</font>
</td>
</tr>
<tr bgcolor='#E1ECF2'>
<td width=80 align=center>SITE</td>
<td width=70 align=center>ITE302</td>
<td>Database Systems</td>
<td>Embedded Lab</td>
<td>11543 - SARAVANAKUMAR K - SITE</td>
<td>2039</td>
<td>L29+L30</td>
</tr>
</table>
<br>
<table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
<tr>
<td bgcolor=#5A768D width="22%" height="30"><font color=#FFFFFF>Syllabus</font>
</td>
<form action='syllabus_file.asp' method='post'>
<td bgcolor='#EDEADE' width='75%' height='30'>
<input type='hidden' name='crscd' value='ITE302'>
<input type='hidden' name='crstp' value='ELA'>
<input type='hidden' name='version' value='1'>
<input type='submit' name='sybcmd' class='submit' value='Download'>
</td>
</form>
</tr>
<tr>
<td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
<font color=#FFFFFF>Text/Reference Material</font>
</td>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB01_DBMS_Lab_Manual.pdf' target='_blank'><font color=blue>DBMS_Lab_Manual.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB02_Structured-Query-Language.pdf' target='_blank'><font color=blue>Structured-Query-Language.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
<a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB03_students_manual.pdf' target='_blank'><font color=blue>students_manual.pdf</font></a>
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="75%" height="30">
NIL
</td>
</tr>
</table>
<br>
<table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
<tr>
<td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
<font color=#FFFFFF>Assignments</font>
</td>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
<tr>
<td bgcolor='#EDEADE' width="76%" height="30">
NIL
</td>
</tr>
</table>
<br>

Related

Generating PDF in ASP.NET MVC by using HTML files for dynamic data

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&apos;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.

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>

Jquery using class in table get data for google dynamic remarketing tag

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>

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');
}
});

Table Alignment Issues HTML JavaScript

I don't know how this is going to work because, it is not a live website, it is a dashboard that pulls data from a chemical analysis program and give a browser view of it. My issue is I have two tables I need aligned at the top of the page. One aligned to the left and one centered. Right now I have a table with an image logo.gif aligned center then below it I have a table meaning/symbol headers aligned to the left I need those on the same line can anyone show me what to do? I can email a picture if need to be see what it looks like. I know there is a lot of broken tags, but I inherited this and it all works except for the two tables on top.
<div align="center">
<table border="0" width="800" id="Nav" cellpadding="0" cellspacing="0" valign="top" >
<tr>
<td height="60" width="100%"><p align="center"><img border="0" src="../Images/Logo.jpg" width="199" height="101"></td>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<TABLE BORDER=2 width="23%" align="left" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#000000">
<TR> <TH>Meaning</TH> <TH>Symbol</TH> </TR>
<TR> <TD><b>No Schedule</TD> <TD align="center"><img src='../Images/Not- ScheduledMain2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Deactivated Tanks</TD> <TD align="center"><img src='../Images/Gray-Astris2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Scheduled</TD> <TD align="center"> <img src='../Images/BlueTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test In Process</TD> <TD align="center"><img src='../Images/GreenTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Late</TD> <TD align="center"> <img src='../Images/RedTest2.png' width='20' height='22' align='center'></TD></TR>
<tr>
</TABLE>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<table border="0" width="100%" id="HeaderTable" cellspacing="0" cellpadding="0" valign="top" height="73">
<tr>
<td colspan="3" height="34"><p align="center"><b><font face="Arial" size="5">IEC's TrueLogic Dashboard</font></b></td>
</tr>
<tr>
<td colspan="3" height="39"><p align="center">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="340" width="110%" bordercolorlight="#FFFFFF" bordercolordark ="#808080" align="center" valign="top">
<table border="0" width="100%" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td height='20' width='20' bgcolor="#C0C0C0" ><p align='center'> </td>
<td width='14'> <td>
<td height='20' width='360' bgcolor="#C0C0C0" ><p align='center'><a><b>Process Line</b></td>
<!-- Sample Item Removed <td height='10' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Sample</b></td>
--> <td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Test Status</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Adds</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Corrective Action</b></td>
</tr>
</Table>
<table border="0" width="100%" id="BodyTable" height="37" cellspacing="0" cellpadding="0" valign="top">
<script type="text/javascript">[ItemsHTML]
</script>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</tr>
<tr>
<td height="25">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
</tr>
<td width="335"><p align="left"><font size="1"> <p> By TrueLogic Company <p> Edited By International Electronic Components</font></td>
<td width="290"><p align="center"></td>
<td width="135"><p align="right"><font size="1">[LastBuild]</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</td>
</tr>
</table>
</div>
</body>
</html>
Is this what you want ?
<div align="center">
<table border="0" width="800" id="Nav" cellpadding="0" cellspacing="0" valign="top" >
<tr>
<td height="60" width="100%" align="center">
<TABLE style="float:left;" BORDER=2 width="23%" align="left" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#000000">
<TR> <TH>Meaning</TH> <TH>Symbol</TH> </TR>
<TR> <TD><b>No Schedule</TD> <TD align="center"><img src='../Images/Not- ScheduledMain2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Deactivated Tanks</TD> <TD align="center"><img src='../Images/Gray-Astris2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Scheduled</TD> <TD align="center"> <img src='../Images/BlueTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test In Process</TD> <TD align="center"><img src='../Images/GreenTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Late</TD> <TD align="center"> <img src='../Images/RedTest2.png' width='20' height='22' align='center'></TD></TR>
<tr>
</TABLE>
<img border="0" src="../Images/Logo.jpg" width="199" height="101">
</td>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<table border="0" width="100%" id="HeaderTable" cellspacing="0" cellpadding="0" valign="top" height="73">
<tr>
<td colspan="3" height="34"><p align="center"><b><font face="Arial" size="5">IEC's TrueLogic Dashboard</font></b></td>
</tr>
<tr>
<td colspan="3" height="39"><p align="center">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="340" width="110%" bordercolorlight="#FFFFFF" bordercolordark ="#808080" align="center" valign="top">
<table border="0" width="100%" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td height='20' width='20' bgcolor="#C0C0C0" ><p align='center'> </td>
<td width='14'> <td>
<td height='20' width='360' bgcolor="#C0C0C0" ><p align='center'><a><b>Process Line</b></td>
<!-- Sample Item Removed <td height='10' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Sample</b></td>
--> <td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Test Status</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Adds</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Corrective Action</b></td>
</tr>
</Table>
<table border="0" width="100%" id="BodyTable" height="37" cellspacing="0" cellpadding="0" valign="top">
<script type="text/javascript">[ItemsHTML]
</script>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</tr>
<tr>
<td height="25">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
</tr>
<td width="335"><p align="left"><font size="1"> <p> By TrueLogic Company <p> Edited By International Electronic Components</font></td>
<td width="290"><p align="center"></td>
<td width="135"><p align="right"><font size="1">[LastBuild]</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</td>
</tr>
</table>
</div>
</body>
</html>

Categories