I have one html page with this dynamically generated table and I need to hide the entire columns from certain td ids like "Id_Position", "Id_Equipe" and "Id_Vehicule" with javascript. How do I do that?
<table width="100%">
<tbody>
<tr class="HeaderRow">
<td id="Id_Position" align="left" width="25">P</td>
<td id="Id_Numero" align="left" width="25">No.</td>
<td id="Id_Perso1" align="left" width="80">Driver</td>
<td id="Id_Equipe" align="left" width="190">Team</td>
<td id="Id_Vehicule" align="left" width="60">Model</td>
<td id="Id_NbTour" align="left" width="25">L</td>
<td id="Id_TpsCumule" align="left" width="85">Total time</td>
<td id="Id_VitesseMoyTotal" align="left" width="30">Avg</td>
<td id="Id_Ecart1er" align="left" width="35">Gap</td>
<td id="Id_EcartPrec" align="left" width="50">PGap</td>
<td id="Id_MeilleurTour" align="left" width="50">Best</td>
<td id="Id_AuTour" align="left" width="25">In</td>
<td id="Id_Inter1" align="left" width="45">S1</td>
<td id="Id_MeilleurInter1" align="left" width="45">BS1</td>
<td id="Id_Inter2" align="left" width="45">S2</td>
<td id="Id_MeilleurInter2" align="left" width="45">BS2</td>
<td id="Id_Inter3" align="left" width="45">S3</td>
<td id="Id_MeilleurInter3" align="left" width="45">BS3</td>
<td id="Id_TpsTour" align="left" width="50">Laptime</td>
<td id="Id_NbStand" align="left" width="20">P</td>
<td id="Id_PositionDepart" align="left" width="20">StartP</td>
</tr>
<tr class="OddRow">
<td align="left" class="">1</td>
<td align="left" class="">65</td>
<td align="left" class="">MAX</td>
<td align="left" class="">Eurofarma RC</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:06.567</td>
<td align="left" class="">126.42</td>
<td align="left" class="">-</td>
<td align="left" class="">-</td>
<td align="left" class="">55.487</td>
<td align="left" class="">23</td>
<td align="left" class="BestTime">15.572</td>
<td align="left" class="">15.572</td>
<td align="left" class="">-</td>
<td align="left" class="">16.086</td>
<td align="left" class="">21:55.535</td>
<td align="left" class="">24.066</td>
<td align="left" class="">56.208</td>
<td align="left" class="">0</td>
<td align="left" class="">1</td>
</tr>
<tr class="EvenRow">
<td align="left" class="">2</td>
<td align="left" class="">0</td>
<td align="left" class="">CBU</td>
<td align="left" class="">Red Bull Racing</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:07.910</td>
<td align="left" class="">126.32</td>
<td align="left" class="">1.343</td>
<td align="left" class="">1.343</td>
<td align="left" class="">55.590</td>
<td align="left" class="">10</td>
<td align="left" class="">15.977</td>
<td align="left" class="">15.711</td>
<td align="left" class="">-</td>
<td align="left" class="">16.126</td>
<td align="left" class="">6:57.520</td>
<td align="left" class="">24.183</td>
<td align="left" class="">56.293</td>
<td align="left" class="">0</td>
<td align="left" class="">6</td>
</tr>
</tbody>
</table>
Vanilla JS solution, sourced from here and here. No other markup needed:
document.onreadystatechange = function() {
hide();
};
function show_hide_column(col_id, do_show) {
var stl;
if (do_show) stl = 'block'
else stl = 'none';
var tbl = document.getElementsByTagName('table')[0];
var index = document.getElementById(col_id).cellIndex;
var rows = tbl.getElementsByTagName('tr');
for (var row = 0; row < rows.length; row++) {
var cels = rows[row].getElementsByTagName('td')
cels[index].style.display = stl;
}
}
function hide() {
show_hide_column("Id_Position", false);
show_hide_column("Id_Equipe", false);
show_hide_column("Id_Vehicule", false);
}
<table width="100%" border=1>
<tbody>
<tr class="HeaderRow">
<td id="Id_Position" align="left" width="25">P</td>
<td id="Id_Numero" align="left" width="25">No.</td>
<td id="Id_Perso1" align="left" width="80">Driver</td>
<td id="Id_Equipe" align="left" width="190">Team</td>
<td id="Id_Vehicule" align="left" width="60">Model</td>
<td id="Id_NbTour" align="left" width="25">L</td>
<td id="Id_TpsCumule" align="left" width="85">Total time</td>
<td id="Id_VitesseMoyTotal" align="left" width="30">Avg</td>
<td id="Id_Ecart1er" align="left" width="35">Gap</td>
<td id="Id_EcartPrec" align="left" width="50">PGap</td>
<td id="Id_MeilleurTour" align="left" width="50">Best</td>
<td id="Id_AuTour" align="left" width="25">In</td>
<td id="Id_Inter1" align="left" width="45">S1</td>
<td id="Id_MeilleurInter1" align="left" width="45">BS1</td>
<td id="Id_Inter2" align="left" width="45">S2</td>
<td id="Id_MeilleurInter2" align="left" width="45">BS2</td>
<td id="Id_Inter3" align="left" width="45">S3</td>
<td id="Id_MeilleurInter3" align="left" width="45">BS3</td>
<td id="Id_TpsTour" align="left" width="50">Laptime</td>
<td id="Id_NbStand" align="left" width="20">P</td>
<td id="Id_PositionDepart" align="left" width="20">StartP</td>
</tr>
<tr class="OddRow">
<td align="left" class="">1</td>
<td align="left" class="">65</td>
<td align="left" class="">MAX</td>
<td align="left" class="">Eurofarma RC</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:06.567</td>
<td align="left" class="">126.42</td>
<td align="left" class="">-</td>
<td align="left" class="">-</td>
<td align="left" class="">55.487</td>
<td align="left" class="">23</td>
<td align="left" class="BestTime">15.572</td>
<td align="left" class="">15.572</td>
<td align="left" class="">-</td>
<td align="left" class="">16.086</td>
<td align="left" class="">21:55.535</td>
<td align="left" class="">24.066</td>
<td align="left" class="">56.208</td>
<td align="left" class="">0</td>
<td align="left" class="">1</td>
</tr>
<tr class="EvenRow">
<td align="left" class="">2</td>
<td align="left" class="">0</td>
<td align="left" class="">CBU</td>
<td align="left" class="">Red Bull Racing</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:07.910</td>
<td align="left" class="">126.32</td>
<td align="left" class="">1.343</td>
<td align="left" class="">1.343</td>
<td align="left" class="">55.590</td>
<td align="left" class="">10</td>
<td align="left" class="">15.977</td>
<td align="left" class="">15.711</td>
<td align="left" class="">-</td>
<td align="left" class="">16.126</td>
<td align="left" class="">6:57.520</td>
<td align="left" class="">24.183</td>
<td align="left" class="">56.293</td>
<td align="left" class="">0</td>
<td align="left" class="">6</td>
</tr>
</tbody>
</table>
If you can leverage the col tag the solution, in pure javascript, is straightforward:
<table id='id_of_table' border=1>
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col class="col4"/>
<tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
<tr><td> 2</td><td> two</td><td> deux</td><td> zwei</td></tr>
<tr><td> 3</td><td> three</td><td> trois</td><td> drei</td></tr>
<tr><td> 4</td><td> four</td><td>quattre</td><td> vier</td></tr>
<tr><td> 5</td><td> five</td><td> cinq</td><td>fünf</td></tr>
<tr><td> 6</td><td> six</td><td> six</td><td> sechs</td></tr>
</table>
You can apply to col just a couple of css attributes, but visibility is one of them
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
For Reference: http://www.dotnetlearners.com/javascript/hide%20table%20column%20using%20javascript.aspx
Try the following :
$(document).ready(function() {
$("#Id_Position,#Id_Equipe,#Id_Vehicule").hide();
}
var header = document.querySelector('#' + yourID),
index = Array.prototype.indexOf.call(header.parentNode.childNodes, header);
header.style.display = 'none';
document.querySelector('.OddRow').childNodes[index].style.display = 'none';
document.querySelector('.EvenRow').childNodes[index].style.display = 'none';
Note: If you are hiding after a click/change/etc event, the event will have a target property that will give you the header node as well, instead of getting it with document.querySelector
not really sure if this is correct, i would find the index of the current col, and apply it to all row.
var id = "";
var targetEl = document.getElementById(id);
var targetIndex = 0;
while((targetEl=targetEl.previousSibling)!=null) ++targetIndex;
// return index of targeted td
var allRow = document.getElementByTagName('tr')
var rowLength = allRow.length;
for(i=0; i<rowLength; i++) {
allRow[i].childNodes[targetIndex].style.display = "none";
}
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(){
...
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);
}
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>