Printing table with charts in html through FireFox

Printing table with charts in html through FireFox - javascript

I have a next problem:
I have a table with charts inside and tables, it is well displayed in the browsers. But when I try to print it(I need to print it to pdf) in mozila 3rd speedometr is being cut so it displays only 2.5 speedometrs.
Option "shrink to fit" doesn't help, if scale is 100% I have the problem, if I put 70% or less-I can see all 3 speedometrs, but the other text is too small. Other tables and content render perfectly depending on scale. Is there any way to solve this problem? This is about FireFox browser- I need exactly him, but I've tried in Chrome too-there he just uses autoscale but still it makes about 70% sacle.
So is there any way to scale charts while printing? Setting exact px size of chart would be bad idea for my problem.
Here is the link to speedometrs table of charts
I think the problem is that JS is runned only once when it's drawing the page and after that it isn't scaling.
The css file:
.container
{
width:33%;
border:0px solid black;
}
.speedometr
{
width:80%;
margin-left: auto;
margin-right: auto;
}
And the html file (js you can find in the link):
<table class="speedometr" >
<tr>
<td id="container" style= "width: 33%; height: 33%"></td>
<td id="container1" style= "width: 33%; height: 33%"></td>
<td id="container2" style= "width: 33%; height: 33%"></td>
</tr>
<tr></tr>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>1</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
01:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
01:00
</td>
<td align=center>
02:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
02:00
</td>
<td align=center>
03:00
</td>
</tr>
</table>
</td>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>2</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
100:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
100:00
</td>
<td align=center>
200:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
200:00
</td>
<td align=center>
300:00
</td>
</tr>
</table>
</td>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>3</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
100:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
100:00
</td>
<td align=center>
200:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
200:00
</td>
<td align=center>
300:00
</td>
</tr>
</table>
</td>
</table>

Try adding a print #media query to your stylesheet and adjust the width of your containers:
#media print {
.container {
width: 20%;
}
}

If your work is being cut off, add empty div at set points between your code to make sure it keeps certain content to each printed page.
add this css to the blank divs:
#media print
{
.blankdiv {page-break-after:always}
}

Related

Change text color depending on table value Laravel

I have datatables on Laravel blade. The table has many rows and three columns which have last column value of salary. I have to choose the 15 people with the highest salary from the table.
The first 5 rows (1-5) of the text in the table should be green, the next 5 rows (6-11) should be yellow, the next 5 rows (11-15) should be red, and the remaining rows should be black as usual.
The codes were written using Laravel Blade and table DataTables.
#foreach($jamisoni as $pay)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-viqs{color:#fe0000;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-xdmp{color:#0a790a;text-align:left;vertical-align:top}
.tg .tg-i99s{color:#ffcb2f;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">NAME</th>
<th class="tg-0lax">COUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-xdmp">1</td>
<td class="tg-xdmp">User 35</td>
<td class="tg-xdmp">100 000</td>
</tr>
<tr>
<td class="tg-xdmp">2</td>
<td class="tg-xdmp">User 01</td>
<td class="tg-xdmp">98 000</td>
</tr>
<tr>
<td class="tg-xdmp">3</td>
<td class="tg-xdmp">User 24</td>
<td class="tg-xdmp">95 000</td>
</tr>
<tr>
<td class="tg-xdmp">4</td>
<td class="tg-xdmp">User 26</td>
<td class="tg-xdmp">92 000</td>
</tr>
<tr>
<td class="tg-xdmp">5</td>
<td class="tg-xdmp">User 10</td>
<td class="tg-xdmp">91 000</td>
</tr>
<tr>
<td class="tg-i99s">6</td>
<td class="tg-i99s">User 11</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">7</td>
<td class="tg-i99s">User 22</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">8</td>
<td class="tg-i99s">User 24</td>
<td class="tg-i99s">84 000</td>
</tr>
<tr>
<td class="tg-i99s">9</td>
<td class="tg-i99s">User 55</td>
<td class="tg-i99s">83 000</td>
</tr>
<tr>
<td class="tg-i99s">10</td>
<td class="tg-i99s">User 65</td>
<td class="tg-i99s">82 000</td>
</tr>
<tr>
<td class="tg-viqs">11</td>
<td class="tg-viqs">User 40</td>
<td class="tg-viqs">70 000</td>
</tr>
<tr>
<td class="tg-viqs">12</td>
<td class="tg-viqs">User 39</td>
<td class="tg-viqs">69 000</td>
</tr>
<tr>
<td class="tg-viqs">13</td>
<td class="tg-viqs">User 29</td>
<td class="tg-viqs">65 000</td>
</tr>
<tr>
<td class="tg-viqs">14</td>
<td class="tg-viqs">User 44</td>
<td class="tg-viqs">64 000</td>
</tr>
<tr>
<td class="tg-viqs">15</td>
<td class="tg-viqs">User 58</td>
<td class="tg-viqs">63 000</td>
</tr>
<tr>
<td class="tg-0lax">16</td>
<td class="tg-0lax">User 70</td>
<td class="tg-0lax">58 000</td>
</tr>
<tr>
<td class="tg-0lax">17</td>
<td class="tg-0lax">User 71</td>
<td class="tg-0lax">55 000</td>
</tr>
</tbody>
</table>
Please help to solve this problem.

You can use $loop variable as condition to write nedded classes to your rows.
Blade loop:
#foreach($jamisoni as $pay)
<tr class="
#if($loop->iteration < 6)
{{ 'td-text-green' }}
#elseif($loop->iteration < 11)
{{ 'td-text-yellow' }}
#elseif($loop->iteration < 16)
{{ 'td-text-red' }}
#endif
">
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
CSS:
.td-text-green td {color: green;}
.td-text-yellow td {color: yellow;}
.td-text-red td {color: red;}

#php $i=1;#endphp
#foreach($jamisoni as $pay)
#php
if($i<=5){
$color='tg-xdmp';
}
else if($i>=6 && $i<=10){
$color='tg-i99s';
}
else if($i>11 && $i<=15){
$color='tg-viqs';
}
else{
$color='tg-0lax';
}
$i++;
#endphp
<tr>
<td class="{{$color}}">{{$loop->iteration}}</td>
<td class="{{$color}}">{{$pay->name}}</td>
<td class="{{$color}}">{{$pay->amount}}</td>
</tr>
#endforeach
Define a $color variable and assign the color value at once. Once done just use it inside your <td> tag by specifying the class.

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

Get specific HTML table element with google script

I've been looking for this same question but none of them seems to have an accurate answer.
I think this should be simpler, I want to get a specific cell from an HTML table in a website using google script.
It needs to work inside google script so pls dont suggest =importhtml, although that's exactly the function I'm looking for.
This is a website example https://prestadores.pami.org.ar/result.php?c=6-2-1-1&beneficio=110313900302&parent=00&vm=2
I need to get the date next to the FECHA DE NACIMIENTO cell, but I dont want to do messy things like indexOf since I have to do it with a few more values.
<table width="480" border="0" cellpadding="3" style="margin-left: 40px;">
<tbody><tr>
<td class="gris"><p>APELLIDO Y NOMBRE:</p></td>
<td class="grisClaro"><p>PEREZ JUANA ANTONIA </p></td>
</tr>
<tr>
<td class="gris"><p>TIPO BENEFICIARIO:</p></td>
<td class="crema"><p>JUBILACION</p></td>
</tr>
<tr>
<td class="gris"><p>N? BENEFICIO:</p></td>
<td class="grisClaro"><p>110313900302</p></td>
</tr>
<tr>
<td class="gris"><p>FECHA DE NACIMIENTO:</p></td>
<td class="crema"><p>08/03/1922</p></td>
</tr>
<tr>
<td class="gris"><p>NACIONALIDAD:</p></td>
<td class="grisClaro"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>PAIS:</p></td>
<td class="crema"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>UGL:</p></td>
<td class="crema"><p>LANUS</p></td>
</tr>
<tr>
<td class="gris"><p>DOCUMENTO:</p></td>
<td class="grisClaro"><p>DNI123456</p></td>
</tr>
<tr>
<td class="gris"><p>SEXO:</p></td>
<td class="crema"><p>FEMENINO</p></td>
</tr>
<tr>
<td class="gris"><p>ESTADO CIVIL:</p></td>
<td class="grisClaro"><p>SEPARADO/A LEGAL</p></td>
</tr>
<tr>
<td class="gris"><p>VENCIMIENTO AFILIACION:</p></td>
<td class="crema"><p></p></td>
</tr>
<tr>
<td class="gris"><p>UNIDAD OPERATIVA:</p></td>
<td class="grisClaro"><p>NO ASIGNADA</p></td>
</tr>
<tr>
<td class="gris"><p>ALTA:</p></td>
<td class="crema"><p>01/09/1982</p></td>
</tr>
<tr>
<td class="gris"><p>BAJA:</p> </td>
<td class="grisClaro"><p>10/10/2013</p></td>
</tr>
<tr>
<td class="gris"><p>OTRA OBRA SOCIAL:</p></td>
<td class="crema"><p>NO</p></td>
</tr>
</tbody></table>
Any suggestions?

Using jQuery's contains selector, it can be done like the following easily.
let td = $('table td.gris:contains("FECHA DE NACIMIENTO")');
console.log(td);
let theDate = td.next('td').text();
console.log(theDate);

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.

You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

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>

We Keep Coding

JavaScript is the programming language of the Web.

Printing table with charts in html through FireFox - javascript

Try adding a print #media query to your stylesheet and adjust the width of your containers: #media print { .container { width: 20%; } }

If your work is being cut off, add empty div at set points between your code to make sure it keeps certain content to each printed page. add this css to the blank divs: #media print { .blankdiv {page-break-after:always} }

Related

Change text color depending on table value Laravel

Show/hide table jsp jstl with Hashmap

Get specific HTML table element with google script

Loop through table and extract specifics cells

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

Categories

Resources