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 :)
Related
i am trying to calculate the consumed volume from a table from each day (date with it's previous date).
When there are no table rows with empty volumes, this works correct.
But when there are some table rows which have empty volumes, it fails.
In code below you can see what i mean:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td> // text 30 (110 - 80)
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td> // text 50 (160 - 110)
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td> // text 60 (220 - 160)
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
$(this).siblings('.consumed').html(+next.html() - $(this).html())
})
Above works great but it fails when my table looks like this:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
Here is a fiddle how it should look like: Fiddle
So i need something like:
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')// find next volume if not empty!
$(this).siblings('.consumed').html(+next.html() - $(this).html()) // which belongs to a volume which is not empty!
You could get all next tr elements from the current one and then filter out the ones without the text and then take the first one from that result and that will be your next value.
$('.volume').each(function() {
const currentValue = $(this).text();
const nextValue = $(this)
.parent('tr')
.nextAll('tr')
.filter(function() {
return $(this).find('.volume').text().length;
}).first().find('.volume').text()
if (currentValue && nextValue) {
$(this).next('.consumed').text(
Number(nextValue) - Number(currentValue)
)
}
})
td.date, td.volume, td.consumed {
border: 1px solid #ccc;
padding: 5px;
}
h1 {
font-weight: bold;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Without empty volumes: shows correct</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
<!----------------------------------------------->
<br /><br />
<h1>With some empty volumes; now it fails</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
+next.html() will create a NaN when there isn't a value there. Try +(next.html() || $(this).html()) instead.
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
var next_val = +(next.html() || $(this).html());
$(this).siblings('.consumed').html(next_val - $(this).html())
})
td{
border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
Easy way to attack it, look for the volume elements with text, do not select the trs elements.
var volumeElems = $(".volume").not(":empty");
volumeElems.each(function(index, elem){
if (index===volumeElems.length-1) return;
const currentElem = $(elem);
const curr = +currentElem.text();
const prev = +volumeElems.eq(index+1).text();
currentElem.next().text(prev-curr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.
Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color.
So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..
This page feature is specially required for mobile version so that user is scroll to the right position on page etc
https://codepen.io/KGuide/pen/jOyLWNR
//$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top);
//$(window).scrollTop($("*:contains('25-04-2021')").offset().top);
$(window).scrollTop($("*:contains('25-04-2021')"));
$("tr:contains('25-04-2021')" ).css( "color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-w ">
<table class="ramadan-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Date" data-label="Date">13-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">1</td>
</tr>
<tr>
<td class="Date" data-label="Date">14-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">2</td>
</tr>
<tr>
<td class="Date" data-label="Date">15-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">3</td>
</tr>
<tr>
<td class="Date" data-label="Date">16-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">4</td>
</tr>
<tr>
<td class="Date" data-label="Date">17-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">5</td>
</tr>
<tr>
<td class="Date" data-label="Date">18-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">6</td>
</tr>
<tr>
<td class="Date" data-label="Date">19-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">7</td>
</tr>
<tr>
<td class="Date" data-label="Date">20-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">8</td>
</tr>
<tr>
<td class="Date" data-label="Date">21-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">9</td>
</tr>
<tr>
<td class="Date" data-label="Date">22-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">10</td>
</tr>
<tr>
<td class="Date" data-label="Date">23-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">11</td>
</tr>
<tr>
<td class="Date" data-label="Date">24-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">12</td>
</tr>
<tr>
<td class="Date" data-label="Date">25-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">13</td>
</tr>
<tr>
<td class="Date" data-label="Date">26-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">14</td>
</tr>
<tr>
<td class="Date" data-label="Date">27-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">15</td>
</tr>
<tr>
<td class="Date" data-label="Date">28-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">16</td>
</tr>
<tr>
<td class="Date" data-label="Date">29-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">17</td>
</tr>
<tr>
<td class="Date" data-label="Date">30-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">18</td>
</tr>
<tr>
<td class="Date" data-label="Date">01-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">19</td>
</tr>
<tr>
<td class="Date" data-label="Date">02-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">20</td>
</tr>
<tr>
<td class="Date" data-label="Date">03-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">21</td>
</tr>
<tr>
<td class="Date" data-label="Date">04-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">22</td>
</tr>
<tr>
<td class="Date" data-label="Date">05-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">23</td>
</tr>
<tr>
<td class="Date" data-label="Date">06-05-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">24</td>
</tr>
<tr>
<td class="Date" data-label="Date">07-05-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">25</td>
</tr>
<tr>
<td class="Date" data-label="Date">08-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">26</td>
</tr>
<tr>
<td class="Date" data-label="Date">09-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">27</td>
</tr>
<tr>
<td class="Date" data-label="Date">10-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">28</td>
</tr>
<tr>
<td class="Date" data-label="Date">11-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">29</td>
</tr>
<tr>
<td class="Date" data-label="Date">12-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">30</td>
</tr>
</tbody>
</table>
</div>
Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);
Jquery scroll needs the offset of html tag.
Demo: https://jsfiddle.net/qtkwr7ny/
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.
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>