Edit css and add jquery to some tables - javascript

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(){
...

Related

Extract data between two TD elements with specific keywords

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.

Show/hide table jsp jstl with Hashmap

I'm stuck!
I'll try to explain my problem:
i've to loop an hashmap, select one of the key's and "explode" details. The hashmap is HashMap<String, List<Object>>. I thinked about a onClick with JS script, but i'm not sure how get the index into the second loop to hide/visualize details.
I looked over the internet and on stackoverflow too, but i can't find a good example for me.
This is the JS code:
<script>
function mostraNascondiCiclo(indice)
{
var divNascosto = document.getElementById('presenzaRaggruppata'+indice);
if (divNascosto.style.display === 'none') {
divNascosto.style.display = 'block';
} else {
divNascosto.style.display = 'none';
}
return false;
}
</script>
........
JSP block:
<table cellpadding="2" cellspacing="1" border = "0" class="sfondotabella" width="60%">
<tr>
<td class="intestazionelista" width="1%" align="center"> </td>
<td class="intestazionelista" align="center">Causale</td>
<td class="intestazionelista" align="center" width="4%">Totale giorni</td>
<td class="intestazionelista" align="center" width="4%">Totale ore</td>
<td class="intestazionelista" align="center" width="4%">Totale minuti</td>
</tr>
<c:forEach var="presenza" items="${requestScope.mappaPresenzeProgrammate}" varStatus="loop">
<tr>
<td class="intestazione" width="1%">
<img src="images/add.png" alt="Espandi dettaglio presenza causale" title="Espandi dettaglio presenza causale ${presenza.key}" onclick="mostraNascondiCiclo(${loop.index})" border='0' height="16" width="16">
</td>
<td class="intestazione">
<c:out value="${presenza.key}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].giorniTotali}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].oreTotali}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].minutiTotali}"/>
</td>
<input type="hidden" id="idCiclo" value="getCategoryIndex(${loop.index})" />
</tr>
<c:forEach var="dettaglio" items="${presenza.value}">
<div> <!-- COMMENT FOR STACKOVERFLOW: i think must put index here somehow -->
<tr>
<td class="intestazionelista" width="1%" align="center"> </td>
<td class="intestazionelista" align="center">Richiesta da</td>
<td class="intestazionelista" align="center">Data<br/>pres.</td>
<td class="intestazionelista" align="center">Causale</td>
<td class="intestazionelista" align="center">Ora<br/>inizio</td>
<td class="intestazionelista" align="center">Ora<br/>fine</td>
<td class="intestazionelista" align="center">Qta<br/>rich.</td>
<td class="intestazionelista" align="center">Note<br/>rich.</td>
<td class="intestazionelista" align="center">Inviata a</td>
<td class="intestazionelista" align="center" style="border-left: 2px solid #185163">Stato</td>
<td class="intestazionelista" align="center">Data Autor./<br/>Rifiuto</td>
<td class="intestazionelista" align="center">Note<br/>Autor.</td>
<td class="intestazionelista" align="center" style="border-left: 2px solid #185163">Elab.</td>
<td class="intestazionelista" align="center">Qta<br/>eff.</td>
</tr>
<tr>
<td class="intestazione" width="1%">
<input type="radio" name="idPresenza" id="idPresenza_${idx}" value="${presenza.idPresenza}"/>
</td>
<td class="intestazione" align="left" style="white-space: nowrap">
${dettaglio.soggettoRichiedente.cognome} ${dettaglio.soggettoRichiedente.nome}
</td>
<td class="intestazione" align="center">
${dettaglio.dataPresenza}
</td>
<td class="intestazione" align="right" title="${dettaglio.causale.descrizione}">
${dettaglio.causale.codice}
</td>
<td class="intestazione" align="center">
${dettaglio.oraInizio}
</td>
....... blabla
</div>
</c:forEach>
I would by clicking with the onClick script, page displays only values ​​of the selected keyset and go on with others. (no oneway approach then).
Hope i'd explain my problem.
Thanks to anyone who will help me!!!

Resolved!
In the second table:
<table style="display: none;" id="entry_${loopKey.index}" cellpadding="2" cellspacing="1" border = "0" class="sfondotabella" width="80%">
JS:
function mostraNascondiCiclo(indice)
{
var divNascosto = document.getElementById(indice);
if (divNascosto.style.display === 'none') {
divNascosto.style.display = 'block';
} else {
divNascosto.style.display = 'none';
}
}

Jquery and CSS add on HTML code

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

Scroll function make left contraction

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 :)

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>

Categories