We Keep Coding

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

Highcharts - Remove "hover" state from chart point (that was set externally)

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!

Choosing more complicated path to element in jquery

I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>

You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Visibility does not work

So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4

I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">

I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table

Chrome extension to check table and add css from jquery

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