The following snippet is showing some changes i want to do to an html table, if the grade is greater or equal than 5 it should put a red line over the course.
But i want to do it ONLY for the course name (for example Physics)
and not for the hole line.
Could someone tell me what is my mistake here? Because i cant figure it out.
Thanks a lot!
$('.topBorderLight').each(function(){
var $this = $(this);
var text = $this.text();
text = text.replace(',', '.');
var grade = Number(text);
if(!isNaN(grade)) {
$this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
.gradeOver5,
.gradeOver5 td {
color: red;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa">
<td valign="top"> <img align="absbottom" src="images/course4.gif" width="16"/></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-1011) PHYSICS<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 6</td>
<td valign="top" class="topBorderLight">6</td>
<td valign="top" class="topBorderLight"> 7</td>
<td valign="top" class="topBorderLight"><span class="redFonts">5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>Α WINTER
2012-2013</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top"> <img align="absbottom" src="images/course1.gif" width="16"></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) PRO<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight"><span class="redFonts">7.5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top"> <img align="absbottom" src="images/course1.gif" width="16"></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) SAE1<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight"> 6</td>
<td valign="top" class="topBorderLight"><span class="redFonts">2.5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
You need to change the CSS selector to target the second td only:
.gradeOver5 td:nth-child(2) {
color: red;
text-decoration: line-through;
}
$('.topBorderLight').each(function() {
var $this = $(this);
var text = $this.text();
text = text.replace(',', '.');
var grade = Number(text);
if (!isNaN(grade)) {
$this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
.gradeOver5 td:nth-child(2) {
color: red;
text-decoration: line-through;
}
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa">
<td valign="top">
<img align="absbottom" src="images/course4.gif" width="16" />
</td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-1011) PHYSICS<span class="redfonts"></span>
</td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight">6</td>
<td valign="top" class="topBorderLight">6</td>
<td valign="top" class="topBorderLight">7</td>
<td valign="top" class="topBorderLight"><span class="redFonts">5</span>
</td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>Α WINTER
2012-2013</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top">
<img align="absbottom" src="images/course1.gif" width="16">
</td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) PRO<span class="redfonts"></span>
</td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight"><span class="redFonts">7.5</span>
</td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top">
<img align="absbottom" src="images/course1.gif" width="16">
</td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) SAE1<span class="redfonts"></span>
</td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight">6</td>
<td valign="top" class="topBorderLight"><span class="redFonts">2.5</span>
</td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Alternatively, you can amend the JS to only apply that class to the required td instead of the tr:
$this.closest('tr').find('td:eq(2)').toggleClass('gradeOver5', grade >= 5);
It looks like you need to toggle the class on td not on tr.
if(!isNaN(grade)) {
$this.closest('td').toggleClass('gradeOver5', grade >= 5);
}
Related
The data showed here is under the public domain.
I have the following HTML code:
<table id="MainContent_tblFilingHistory" cellspacing="5" cellpadding="0" style="border-color:Gray;border-width:1px;border-style:Solid;width:98%;">
<tr style="color:White;background-color:Gray;">
<td align="center" colspan="4" style="font-weight:bold;">UCC-1 Standard</td>
</tr>
<tr>
<td align="left" style="border-width:0px;font-weight:bold;">UCC Filing Number: <br> Filing Date:</td>
<td align="left" style="border-width:0px;">202396233680<br>1/5/2023 12:44:00 PM</td>
<td style="font-weight:bold;">Files: </td>
<td><a href='UCCSearchViewPDF.aspx?Path=DRIVE1/2023/0105/002293539/0034/202396233680_1.pdf' target = '_blank'>202396233680_1.pdf</a>, 1 pgs <br></td>
</tr>
<tr style="border-color:Gray;border-style:Solid;">
<td align="left" style="border-width:0px;font-weight:normal;">Action:</td>
<td align="left" style="border-width:0px;">InitialFiling</td>
<td align="left" colspan="2" style="font-weight:bold;"></td>
</tr>
<tr>
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;"><span style="font-weight:bold;"><input id="MainContent_chkFilingNumber202396233680" type="checkbox" name="ctl00$MainContent$chkFilingNumber202396233680" /><label for="MainContent_chkFilingNumber202396233680">Request Certified Copy</label></span></td>
</tr>
<tr style="font-weight:bold;">
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;">Debtor(s)</td>
</tr>
<tr>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">ABCD<BR>LOWELL MA 01854</td>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">EFG<BR>LOWELL MA 01854</td>
</tr>
<tr style="font-weight:bold;">
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;">Secured Parties</td>
</tr>
<tr>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">C T CORP<BR>330 N BRAND BLVD, SUITE 700, ATTN: SPRS<BR>GLENDALE CA 91203</td>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;"> </td>
</tr>
<tr style="color:White;background-color:Gray;">
<td align="center" colspan="4" style="font-weight:bold;">UCC-3 TERMINATION</td>
</tr>
<tr>
<td align="left" style="border-width:0px;font-weight:bold;">UCC Filing Number: <br> Filing Date:</td>
<td align="left" style="border-width:0px;">202396684400<br>1/19/2023 8:50:00 AM</td>
<td style="font-weight:bold;">Files: </td>
<td><a href='UCCSearchViewPDF.aspx?Path=DRIVE1/2023/0118/000000000/9296/202396684400_1.pdf' target = '_blank'>202396684400_1.pdf</a>, 1 pgs <br></td>
</tr>
<tr style="border-color:Gray;border-style:Solid;">
<td align="left" style="border-width:0px;font-weight:normal;">Action:</td>
<td align="left" style="border-width:0px;">TerminationSecuredParty </td>
<td align="left" colspan="2" style="font-weight:bold;"></td>
</tr>
<tr>
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;"><span style="font-weight:bold;"><input id="MainContent_chkFilingNumber202396684400" type="checkbox" name="ctl00$MainContent$chkFilingNumber202396684400" /><label for="MainContent_chkFilingNumber202396684400">Request Certified Copy</label></span></td>
</tr>
<tr style="font-weight:bold;">
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;">Debtor(s)</td>
</tr>
<tr>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">AAA<BR>240 VARNUM AVE APT 18<BR>LOWELL MA 01854</td>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">BBB <br>240 VARNUM AVE APT 18<BR>LOWELL MA 01854</td>
</tr>
<tr style="font-weight:bold;">
<td colspan="4" style="border-color:Gray;border-width:1px;border-style:Solid;">Secured Parties</td>
</tr>
<tr>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">C T CORP<BR>330 N BRAND BLVD, SUITE 700, ATTN: SPRS<BR>GLENDALE CA 91203</td>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;"> </td>
</tr>
</table>
I would like to use JavaScript xPath to extract the HTML between the first "Debtor(s)" and "Secured Parties" occurrences.
The result I'm looking for is:
<tr>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">ABCD<BR>LOWELL MA 01854</td>
<td align="left" colspan="2" style="border-color:Gray;border-width:1px;border-style:Solid;">EFG<BR>LOWELL MA 01854</td>
</tr>
I tried with this JavaScript code but it gives me the second HTML data between the second "Debtor(s)" and "Secured Parties" occurrences too.
var xPath = '//tr[preceding-sibling::tr/td[contains(text(),"Debtor(s)")]][count(.|//tr[following-sibling::tr/td[contains(text(),"Secured Parties")]])=count(//tr[following-sibling::tr/td[contains(text(),"Secured Parties")]])]';
var w = document.evaluate(xPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var results = [];
var query = document.evaluate(xPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var j = 0, length = query.snapshotLength; j < length; ++j) {
console.log(query.snapshotItem(j).innerHTML.trim());
}
Thanks.
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.
I have this issue going on.
I want to make something to check on some grades on a list of tables, and if its over or equal to 5 it should put a red lone across it. The following code is a list with 3 courses.
If you run the html code you will see that the grades are 5 .. 2.5 ... 7.5
And when i run to jsfiddle
$('.topBorderLight').each(function(){
var $this = $(this);
var grade = Number($this.text());
if(!isNaN(grade)) {
$this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
.gradeOver5,
.gradeOver5 td {
color: red;
text-decoration: line-through;
}
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa">
<td valign="top"> <img align="absbottom" src="images/course4.gif" width="16"/></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-1011) PHYSICS<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 6</td>
<td valign="top" class="topBorderLight">6</td>
<td valign="top" class="topBorderLight"> 7</td>
<td valign="top" class="topBorderLight"><span class="redFonts">5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>Α WINTER
2012-2013</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top"> <img align="absbottom" src="images/course1.gif" width="16"></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) PRO<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight"><span class="redFonts">7.5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="10" class="groupHeader">Semester A</td>
</tr>
<tr height="25" class="italicHeader">
<td valign="top"></td>
<td colspan="2" valign="top">Course</td>
<td valign="top">Type</td>
<td valign="top">SM</td>
<td valign="top">Hours</td>
<td valign="top">ECTS</td>
<td valign="top">GRADE</td>
<td valign="top">Exam</td>
</tr>
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
<td valign="top"> <img align="absbottom" src="images/course1.gif" width="16"></td>
<td colspan="2" valign="top" class="topBorderLight">(Ν2-4021) SAE1<span class="redfonts"></span></td>
<td valign="top" class="topBorderLight">COMPULSORY</td>
<td valign="top" class="topBorderLight"> 4</td>
<td valign="top" class="topBorderLight">4</td>
<td valign="top" class="topBorderLight"> 6</td>
<td valign="top" class="topBorderLight"><span class="redFonts">2.5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER
2014-2015</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
My problem is that it is putting the line in the grade of 2.5 and not in the grade 5.
Could someone help me find the tricky part here?
Thanks a lot!
Although your code works perfectly fine in JSFiddle you want to alter your jQuery slightly so that it looks like this. This is just to handle the possibility of potential commas instead of decimals in your numbers as the Number class doesn't like a number in the format 2,5 and would prefer 2.5
$('.topBorderLight').each(function(){
var $this = $(this);
var text = $this.text();
text = text.replace(',', '.');
var grade = Number(text);
if(!isNaN(grade)) {
$this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
See a working version of this using commas in the grades here
I just added your code to the js fiddle and using the newest version of jquery and it works fine.
$('.topBorderLight').each(function(){
var $this = $(this);
var grade = Number($this.text());
if(!isNaN(grade)) {
$this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
Your other columns (SM/Hours/ECTS) are also parsing as numbers so they are triggering in the loop, try adding a class to just the grades:
...
<td valign="top" class="topBorderLight"><span class="redFonts grade">5</span></td>
...
Then upgrade the jquery:
$('.grade').each(function(){
...
I'm using following script for Fixed my menu when Scroll the page.
var num = 5;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.scroll').css({'position':'fixed', 'top':'0px'});
} else {
$('.scroll').css({'position':'', 'top':''});
}
});
I'm using this script for table. See Jsfiddle.
When Scroll Down, that title is going contraction to left left side.
Why It's happening and How I can fix?
It should support major browsers(not IE).
When you set position: fixed the left prop seems to be set to 0. Hence, the headers were moving to the left corner. You may have to play with display and width props to do what you're after. Also note that adding/removing a class is better than setting inline styles via .css(). Look at the following demo and adapt the code accordingly to suit your needs.
var num = 5;
$(document).bind('scroll', function () {
if ($(document).scrollTop() > num) {
$('.scroll').addClass("scrolled");
} else {
$('.scroll').removeClass("scrolled");
}
});
.scroll { width: 100%; }
.scroll th { width: 49% }
.scrolled { position: fixed; top: 0; }
.scrolled th { display: inline-block; width: 47.5% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" width="100%">
<thead>
<tr class="scroll">
<th>Id</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
</tbody>
</table>
There may be other ways of doing it, but this is what I could quickly think of :)
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>