I would like to make one chrome extension that check the GRADE of the following table and if its over 5 it should put a line over course name like "physics" or "mathematics" etc.
i have this table over here
<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,5</span></td>
<td nowrap="true" class="topBorderLight"><span class="tablecell"><i>Α WINTER
2012-2013</i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I dont know the jquery code to put a line on it but im trying with this code
that makes the color red
$("#topBorderLight").css("color","red");
But its not working. Anyone can guide me through making it red OR putting a line through it if the grade is over 5?
Thanks a lot for your time.
As previously stated, you should use a dot rather than a hash to access elements by class name.
As for the strikethrough, you should use the CSS text-decoration property:
$('.topBorderLight').css('text-decoration', 'line-through');
That said, it's much less brittle to add CSS classes to these elements and style those classes.
You could add some CSS like this:
.gradeOver5 {
color: red;
text-decoration: line-through;
}
Then, just add or remove the class based on the grade value:
$('.myElement').toggleClass('gradeOver5', grade > 5);
toggleClass adds or removes a class on an element based on a boolean value. Docs here: http://api.jquery.com/toggleclass/
Update
So your complete JS might look like this:
$('.topBorderLight').each(function(){
var $this = $(this);
var grade = Number($this.text());
if(!isNaN(grade)) {
$this.toggleClass('gradeOver5', grade > 5);
}
});
Here's a JSFiddle: http://jsfiddle.net/dgrundel/btatr2wn/
The way to address a class in CSS and Javascript is by using a . (dot), addressing an id by using a # (hashtag).
As for your second request, you can use this code:
$(document).ready(function() {
$('.topBorderLight').each(function() {
if($(this).text() > 5) {
// do something
}
});
});
Related
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);
I created a combination of chart and table. Took me for ever to be able to hover on one column and trigger the corresponding tooltip. Everything works fine except that the points in the chart (the ones that once were triggered by hovering on a table column) remain with the hover state.
In the image, it's clear what I need to accomplish. I need that, everytime I hover on another column, all the previous point are set to "normal" instead of "hover" (I doubt that's the real way to call it)
So in the image:
the blue arrow points to the right state (when the column is hovered on)
the red arrow points to the wrong state (once you hovered on a column but then hovered another)
the green arrow points to the state that all the points except the one in focus, should be
How it should be:
PS: if you hover on any of the cells, or all of them, they all get the "hover" status, but if you hover on 1 point of the chart, the rest of the points get the "normal" status, which is what I need to accomplish.
The code can be found here or here:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<div id="section_status_chart"></div>
<div id="section_status_table1">
<table id="section_status_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Status</th>
<th>Apr 12</th>
<th>Apr 13</th>
<th>Apr 14</th>
<th>Apr 15</th>
<th>Apr 16</th>
<th>Apr 17</th>
<th>Apr 18</th>
<th>Apr 19</th>
<th>Apr 20</th>
<th>Apr 21</th>
<th>Apr 22</th>
<th>Apr 23</th>
</tr>
</thead>
<tbody>
<tr>
<td>Approved</td>
<td class="font-green-meadow">2,658</td>
<td class="font-green-meadow">1,554</td>
<td class="font-green-meadow">1,653</td>
<td class="font-green-meadow">1,997</td>
<td class="font-red-intense">-966</td>
<td class="font-green-meadow">1,087</td>
<td class="font-green-meadow">1,434</td>
<td class="font-green-meadow">1,112</td>
<td class="font-green-meadow">1,546</td>
<td class="font-red-intense">-750</td>
<td class="font-green-meadow">998</td>
<td class="font-green-meadow">157</td>
</tr>
<tr>
<td>Conditionally approved</td>
<td class="font-green-meadow">1,543</td>
<td class="font-red-intense">-1,634</td>
<td class="font-green-meadow">1,976</td>
<td class="font-green-meadow">2,643</td>
<td class="font-green-meadow">1,007</td>
<td class="font-green-meadow">1,114</td>
<td class="font-green-meadow">1,435</td>
<td class="font-red-intense">-841</td>
<td class="font-green-meadow">1,182</td>
<td class="font-green-meadow">1,221</td>
<td class="font-green-meadow">2,009</td>
<td class="font-red-intense">-201</td>
</tr>
<tr>
<td>Referred</td>
<td class="font-red-intense">-652</td>
<td class="font-green-meadow">1,654</td>
<td class="font-green-meadow">1,262</td>
<td class="font-green-meadow">1,621</td>
<td class="font-red-intense">-116</td>
<td class="font-green-meadow">1,143</td>
<td class="font-green-meadow">1,004</td>
<td class="font-green-meadow">1,965</td>
<td class="font-green-meadow">2,531</td>
<td class="font-red-intense">-1,645</td>
<td class="font-green-meadow">1,442</td>
<td class="font-red-intense">-1,967</td>
</tr>
<tr>
<td>Rejected</td>
<td class="font-green-meadow">1,144</td>
<td class="font-green-meadow">1,523</td>
<td class="font-green-meadow">1,616</td>
<td class="font-red-intense">-553</td>
<td class="font-green-meadow">1,039</td>
<td class="font-green-meadow">1,343</td>
<td class="font-green-meadow">1,300</td>
<td class="font-green-meadow">1,533</td>
<td class="font-red-intense">-882</td>
<td class="font-green-meadow">1,161</td>
<td class="font-green-meadow">2,030</td>
<td class="font-red-intense">-1,932</td>
</tr>
<tr class="table-footer">
<td>Total</td>
<td class="font-red-intense">-652</td>
<td class="font-green-meadow">1,654</td>
<td class="font-green-meadow">1,262</td>
<td class="font-green-meadow">1,621</td>
<td class="font-red-intense">-116</td>
<td class="font-green-meadow">1,143</td>
<td class="font-green-meadow">1,004</td>
<td class="font-green-meadow">1,965</td>
<td class="font-green-meadow">2,531</td>
<td class="font-red-intense">-1,645</td>
<td class="font-green-meadow">1,442</td>
<td class="font-red-intense">-1,967</td>
</tr>
</tfoot>
</table>
</div>
Updated fiddle here, but this is the main code to fix the issue:
...
if (pointIndex > -1) {
for(var i = 0; i < section_status_chart.series[0].data.length; i++) {
section_status_chart.series[0].data[i].setState('');
}
section_status_chart.series[0].data[pointIndex].setState('hover');
section_status_chart.tooltip.
refresh(section_status_chart.series[0].data[pointIndex]);
}
...
Set the state back to '' for all points before setting the state on the point associated with the column. There's probably a cleaner solution than the for loop I've written, but this is the main idea.
P.S. This is a really nice feature you've made!
I have two tables in HTML:
<tr>
<td width="319" align="right" bgcolor="#F5F5F5" class="txtdarkgreybold">Article title:</td>
<td width="346" align="left" bgcolor="#F5F5F5">My title</td>
</tr>
<tr>
<td align="right" class="txtdarkgreybold">Author:</td>
<td align="left">Doe John<br /></td>
</tr>
By using document.getElementsByClassName("txtdarkgreybold") I can retrieve string Article title: but I am interested in what comes after it, that is: My title. How do I do this? In the second table I can get Author: but I am interested in Doe John. I was thinking about nextSibling as a way to get the strings that come after string I can get but I cannot implement it on my own.
You could use nextElementSibling with textContent :
document.querySelector('.txtdarkgreybold').nextElementSibling.textContent
Hope this helps.
console.log( document.querySelectorAll('.txtdarkgreybold')[0].nextElementSibling.textContent );
console.log( document.querySelectorAll('.txtdarkgreybold')[1].nextElementSibling.textContent );
<table>
<tr>
<td width="319" align="right" bgcolor="#F5F5F5" class="txtdarkgreybold">Article title:</td>
<td width="346" align="left" bgcolor="#F5F5F5">My title</td>
</tr>
<tr>
<td align="right" class="txtdarkgreybold">Author:</td>
<td align="left">Doe John<br /></td>
</tr>
</table>
I am working on a simple project to learn web development and I would like to add a feature in my project that highlights the clicked cell to a specific colour. Please have a look at this link: https://jsfiddle.net/pz6tc3ae/30/
What this project does is, when any cell from table 1 is clicked it triggers table 2, however, currently there is no way of knowing which table cell triggered table 2, so I am thinking of adding a feature that highlights the clicked cell, however, when the user clicks away from the highlighted cell, the cell should change colour to the one it was in before being highlighted, and not to the default colour.
Please note, try the link above in chrome, some features does not work other browsers.
HTML
<title>Untitled Document</title>
<body>
<table width="300" border="1" id="table1">
<tbody>
<tr>
<td id="cell1"> On-Menu</td>
<td id="cell2"> On-Menu</td>
<td id="cell3"> On-Menu</td>
<td id="cell4"> On-Menu</td>
</tr>
<tr>
<td id="cell5"> On-Menu</td>
<td id="cell6"> On-Menu</td>
<td id="cell7"> On-Menu</td>
<td id="cell8"> On-Menu</td>
</tr>
<tr>
<td id="cell9"> On-Menu</td>
<td id="cell10"> On-Menu</td>
<td id="cell11"> On-Menu</td>
<td id="cell12"> On-Menu</td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="cellorange"> Orange</td>
</tr>
<tr>
<td id="cellapple"> Apple</td>
</tr>
<tr>
<td id="cellbanana"> Banana</td>
</tr>
</tbody>
</table>
</body>
If my question was not clear, please let me know and I will try explaining it better :)
try this:
https://jsfiddle.net/pz6tc3ae/35/
just add to javascript:
actionCell.className = (actionCell.className === "green") ? "none" : "green";
and to CSS:
.green{background:green;}
This is the demo with jquery:
https://jsfiddle.net/pz6tc3ae/37/
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(){
...