Change size to PDF page (DOMPDF) - javascript

I'm creating a huge form, and I'm using a bank credit template as a basis. There's a slight issue:
When DOMPDF exports the content, it won't fit in the page.
How can I change the page size?
I tried with $dompdf->set_paper(DEFAULT_PDF_PAPER_SIZE, 'portrait'); and
$customPaper = array(0,0,360,360);
$dompdf->set_paper($customPaper);
but it won't work.
It displays the following: Please click to see the error displayed
Here's the big ass snippet of my code.
<?php
require_once("dompdf/dompdf_config.inc.php");
session_start();
if($_POST){
$empresa= $_POST["empresa"];
$fechaent= $_POST["fechaent"];
$horaent= $_POST["hentrada"];
$tecnico= $_POST["tecnico"];
$horasal= $_POST["hsalida"];
$rvisita= $_POST["razonvisita"];
$comentarios= $_POST["comentarios"];
$trabajor= $_POST["trabajorealizado"];
}
$codigoHTML='
<html>
<head>
<link rel=Stylesheet href=stylesheet.css>
<style>
h1 { font-size:40px; text-align:center; font-weight:bold; margin-bottom:10px; text-shadow:0 0 3px #ddd; }
h2 { font-size:15px; text-align:left; font-weight:bold; margin-bottom:10px; }
h3 { font-size:20px; text-align:left; font-weight:bold; margin-bottom:10px; text-shadow:0 0 3px #ddd; }
pre {background-color:"WHITE"; font-family:Arial; margin-left:50px; margin-right:50px;}
b{ font-family:Calibri;
}
p.demo { background-color:"white"; width:100px; margin:10px 0; font-family:Arial; }
</style>
</head>
<body link="#0563C1" vlink="#954F72" class=xl65 style="width:50%;">
<table border=0 cellpadding=0 cellspacing=0 width=auto ">
<tr height=20 >
<td height=20 class=xl65 width=64 style="height:15.0pt;width:48pt"></td>
<td colspan=12 rowspan=3 class=xl67 width=894 style="width:671pt"><font
class="font6">FORMULARIO DE CONOCIMIENTO DEL CLIENTE SECTOR ASEGURADOR<br>
COMISION NACIONAL DE BANCOS Y SEGUROS</font><font class="font5"><br>
(Con base a Resolución N° 1393/26-12-2007 y 184/12-02-2008)</font>
</td>
<td class=xl65 width=64 style="width:48pt"></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl65></td>
</tr>
<tr height=21 >
<td height=21 class=xl65 ></td>
</tr>
<tr height=20 style="height:15.0pt">
<td height=20 class=xl65 style="height:15.0pt"></td>
<td colspan=12 rowspan=2 class=xl138 style="border-right:1.0pt solid black;
border-bottom:.5pt solid black">Tipo de Relación:
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_3">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_4">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_5">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_6">
Radio</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_7">
Radio</label>
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl142 style="border-right:1.0pt solid black">I. DATOS
PERSONA NATURAL (Para personas juridicas serán las del Representante)
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=3 class=xl144>Primer Apellido</td>
<td colspan=4 class=xl95 style="border-left:none">Segundo Apellido</td>
<td colspan=5 class=xl95 style="border-right:1.0pt solid black;border-left:
none">Nombres</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=3 class=xl87> </td>
<td colspan=4 class=xl79 style="border-left:none"> </td>
<td colspan=5 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl146 style="border-right:1.0pt solid black">Tipo de
Identificación
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=2 rowspan=2 class=xl144>Número de Documento</td>
<td colspan=3 rowspan=2 class=xl95>Lugar y Fecha de Expedición</td>
<td colspan=3 rowspan=2 class=xl95>Fecha de Nacimiento</td>
<td colspan=2 rowspan=2 class=xl98 width=148 style="width:111pt">Lugar de
Nacimiento
</td>
<td colspan=2 rowspan=2 class=xl95 style="border-right:1.0pt solid black">Estado
Civil
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=2 rowspan=3 class=xl87> </td>
<td colspan=3 rowspan=3 class=xl79> </td>
<td class=xl95 style="border-top:none;border-left:none">Día</td>
<td class=xl95 style="border-top:none;border-left:none">Mes</td>
<td class=xl95 style="border-top:none;border-left:none">Año</td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td rowspan=2 class=xl79 style="border-top:none"> </td>
<td rowspan=2 class=xl79 style="border-top:none"> </td>
<td rowspan=2 class=xl79 style="border-top:none"> </td>
<td colspan=4 class=xl95 style="border-right:1.0pt solid black;border-left:
none">Nombre del Cónyugue</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=4 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=2 class=xl144>Genero</td>
<td colspan=3 rowspan=2 class=xl95>Nacionalidad</td>
<td colspan=7 rowspan=2 class=xl95 style="border-right:1.0pt solid black">Profesión,
Oficio y Ocupación
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl144 style="border-top:none">Masculino</td>
<td class=xl95 style="border-top:none;border-left:none">Femenino</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl87 style="border-top:none"> </td>
<td class=xl79 style="border-top:none;border-left:none"> </td>
<td colspan=3 class=xl79 style="border-left:none"> </td>
<td colspan=7 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl148 style="border-right:1.0pt solid black">Dirección
Residencia
</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl87 style="border-right:1.0pt solid black"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl144 style="border-top:none">Municipio</td>
<td colspan=2 class=xl95 style="border-left:none">Departamento</td>
<td colspan=2 class=xl95 style="border-left:none">Pais</td>
<td colspan=2 class=xl95 style="border-left:none">Telefono</td>
<td colspan=2 class=xl95 style="border-left:none">Celular</td>
<td colspan=3 class=xl95 style="border-right:1.0pt solid black;border-left:
none">Correo Electrónico</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td class=xl87 style="border-top:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=3 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl150 style="border-right:1.0pt solid black"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=3 class=xl144>Empresa donde trabaja</td>
<td colspan=3 class=xl95 style="border-left:none">Área</td>
<td colspan=3 class=xl95 style="border-left:none">Cargo</td>
<td colspan=3 class=xl94 style="border-right:1.0pt solid black;border-left:
none">Tiempo de Laborar</td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=3 class=xl87> </td>
<td colspan=3 class=xl79 style="border-left:none"> </td>
<td colspan=3 class=xl79 style="border-left:none"> </td>
<td colspan=3 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
<tr height=20 >
<td height=20 class=xl65 ></td>
<td colspan=12 class=xl144 style="border-right:1.0pt solid black">Dirección
Laboral
</td>
<td class=xl65></td>
</tr>
<tr height=19 >
<td height=19 class=xl65 style="height:14.25pt"></td>
<td colspan=12 class=xl87 style="border-right:1.0pt solid black"> </td>
<td class=xl65></td>
</tr>
<tr height=19 >
<td height=19 class=xl65 style="height:14.25pt"></td>
<td class=xl144 style="border-top:none">Municipio</td>
<td colspan=2 class=xl95 style="border-left:none">Departamento</td>
<td colspan=2 class=xl95 style="border-left:none">Pais</td>
<td colspan=2 class=xl95 style="border-left:none">Telefono</td>
<td colspan=2 class=xl95 style="border-left:none">Fax</td>
<td colspan=3 class=xl95 style="border-right:1.0pt solid black;border-left:
none">Correo Electrónico</td>
<td class=xl65></td>
</tr>
<tr height=19 >
<td height=19 class=xl65 style="height:14.25pt"></td>
<td class=xl87 style="border-top:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=2 class=xl79 style="border-left:none"> </td>
<td colspan=3 class=xl79 style="border-right:1.0pt solid black;border-left:
none"> </td>
<td class=xl65></td>
</tr>
</table>
</body>
</html>
';
$filename="- formulario.pdf";
$codigoHTML=utf8_decode($codigoHTML);
$dompdf=new DOMPDF();
$dompdf->load_html($codigoHTML);
ini_set("memory_limit","128M");
$customPaper = array(0,0,360,360);
$dompdf->set_paper($customPaper);
$dompdf->render();
$pdf=$dompdf->output($filename);
file_put_contents("forms/".$filename, $pdf);
$mi_pdf = "forms/".$filename;
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="'.$mi_pdf.'"');
readfile($mi_pdf);
?>


Issue was on DOMPDF version.
To change the page size:
$customPaper = array(0,0,360,360);
$dompdf->set_paper($customPaper);

Related

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

complicated calculation based on categories selection on JS or Jquery

I have an excel like table asThe image version, I will need to do real time calculation on HTML using JS or JQuery.
Below example do the calculation based on single value as you can see mine changes and I have two drop-down 10 selection other one with 16 selection.
Calculation rules are:
If user selects Origin Europe and select Volume 10, then for the matching 10 number fields I will need calculate amount x Volume 10 corresponding value from below the table
Apple = User input 3 and corresponding value from table is 0 so my result will be 0.
Boysenberry = User input 233 and corresponding value from table is 1 so my result will be 233.
so on, I have 10 tables for lookup for corresponding calculation value it changes based on the Origin Drop-down and Volume.
If I had one it was easy when I have more table I bit straggle I think there are some good way to do the calculation.
Thanks for your help in advance.
jquery- calculate a total value after filling out a checkbox/radio/dropdown form
<div>
<label class="description" for="element_2">Product Origin</label>
<select class="element select medium" id="element_2" name="element_2">
<option value="" selected="selected"></option>
<option value="1" >Europe</option>
<option value="2" >Asia</option>
<option value="3" >China</option>
<option value="3" >India</option>
<option value="3" >USA</option>
<option value="3" >Africa</option>
</select>
</div>
<div>
<label class="description" for="element_1">Volume</label>
<select class="element select medium" id="element_1" name="element_1">
<option value="" selected="selected"></option>
<option value="10" >10</option>
<option value="100" >100</option>
<option value="1000" >1000</option>
<option value="2000" >2000</option>
<option value="3000" >3000</option>
<option value="4000" >4000</option>
<option value="5000" >5000</option>
<option value="6000" >6000</option>
<option value="6000" >6000</option>
<option value="8000" >8000</option>
<option value="9000" >9000</option>
<option value="10000" >10000</option>
<option value="20000" >20000</option>
<option value="30000" >30000</option>
<option value="40000" >40000</option>
<option value="50000" >50000</option>
</select>
</div>
<div>
<label class="description" for="element_1">Apple </label>
<input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_2">Apricot </label>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_3">Banana </label>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_4">Bilberry </label>
<input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_5">Blackberry </label>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_6">Blackcurrant </label>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_7">Blueberry </label>
<input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_8">Boysenberry </label>
<input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_9">Cherry </label>
<input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div>
<label class="description" for="element_10">Coconut </label>
<input id="element_10" name="element_10" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th title="Field #1"><strong>Category 1: Origin Europe</strong></th>
<th title="Field #2"><strong>10</strong></th>
<th title="Field #3"><strong>100</strong></th>
<th title="Field #4"><strong>1000</strong></th>
<th title="Field #5"><strong>2000</strong></th>
<th title="Field #6"><strong>3000</strong></th>
<th title="Field #7"><strong>4000</strong></th>
<th title="Field #8"><strong>5000</strong></th>
<th title="Field #9"><strong>6000</strong></th>
<th title="Field #10"><strong>7000</strong></th>
<th title="Field #11"><strong>8000</strong></th>
<th title="Field #12"><strong>9000</strong></th>
<th title="Field #13"><strong>1000</strong></th>
<th title="Field #14"><strong>10000</strong></th>
<th title="Field #15"><strong>20000</strong></th>
<th title="Field #16"><strong>30000</strong></th>
<th title="Field #17"><strong>40000</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">3</td>
<td align="right">4</td>
<td align="right">5</td>
<td align="right">6</td>
<td align="right">7</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">10</td>
<td align="right">11</td>
<td align="right">12</td>
<td align="right">13</td>
<td align="right">14</td>
</tr>
<tr>
<td>Apricot</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1.5</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3.5</td>
<td align="right">4</td>
<td align="right">4.5</td>
<td align="right">5</td>
<td align="right">5.5</td>
<td align="right">6</td>
<td align="right">7</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">5</td>
<td align="right">6</td>
<td align="right">7</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
</tr>
<tr>
<td>Bilberry</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">30</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
<td align="right">60</td>
<td align="right">65</td>
<td align="right">70</td>
</tr>
<tr>
<td>Blackberry</td>
<td align="right">0.1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">20</td>
<td align="right">50</td>
<td align="right">75</td>
<td align="right">100</td>
<td align="right">125</td>
<td align="right">150</td>
<td align="right">175</td>
<td align="right">200</td>
<td align="right">225</td>
<td align="right">250</td>
<td align="right">275</td>
<td align="right">300</td>
<td align="right">350</td>
</tr>
<tr>
<td>Blackcurrant</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
</tr>
<tr>
<td>Blueberry</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
<td align="right">24</td>
<td align="right">28</td>
<td align="right">30</td>
<td align="right">36</td>
</tr>
<tr>
<td>Boysenberry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">4</td>
<td align="right">5.5</td>
<td align="right">7</td>
<td align="right">8.5</td>
<td align="right">10</td>
<td align="right">11.5</td>
<td align="right">13</td>
<td align="right">14.5</td>
<td align="right">16</td>
<td align="right">17.5</td>
<td align="right">19</td>
<td align="right">20.5</td>
<td align="right">22</td>
</tr>
<tr>
<td>Cherry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">5</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">28</td>
<td align="right">31</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Coconut</td>
<td align="right">0.1</td>
<td align="right">0.25</td>
<td align="right">0.5</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
</br>
</br>
<td><strong>Category 2 Origin Asia</strong></td>
<td align="right"><strong>10</strong></td>
<td align="right"><strong>100</strong></td>
<td align="right"><strong>1000</strong></td>
<td align="right"><strong>2000</strong></td>
<td align="right"><strong>3000</strong></td>
<td align="right"><strong>4000</strong></td>
<td align="right"><strong>5000</strong></td>
<td align="right"><strong>6000</strong></td>
<td align="right"><strong>7000</strong></td>
<td align="right"><strong>8000</strong></td>
<td align="right"><strong>9000</strong></td>
<td align="right"><strong>1000</strong></td>
<td align="right"><strong>10000</strong></td>
<td align="right"><strong>20000</strong></td>
<td align="right"><strong>30000</strong></td>
<td align="right"><strong>40000</strong></td>
</tr>
<tr>
<td>Apple</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">17.7</td>
<td align="right">21.5</td>
<td align="right">25.3</td>
<td align="right">29.1</td>
<td align="right">32.9</td>
<td align="right">36.7</td>
<td align="right">40.5</td>
<td align="right">44.3</td>
<td align="right">48.1</td>
<td align="right">51.9</td>
</tr>
<tr>
<td>Apricot</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1.5</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3.5</td>
<td align="right">4</td>
<td align="right">4.5</td>
<td align="right">5</td>
<td align="right">5.5</td>
<td align="right">6</td>
<td align="right">7</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">27</td>
<td align="right">30</td>
<td align="right">33</td>
<td align="right">36</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Bilberry</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">30</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
<td align="right">60</td>
<td align="right">65</td>
<td align="right">70</td>
<td align="right">75</td>
</tr>
<tr>
<td>Blackberry</td>
<td align="right">0.1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">20</td>
<td align="right">50</td>
<td align="right">75</td>
<td align="right">100</td>
<td align="right">125</td>
<td align="right">150</td>
<td align="right">175</td>
<td align="right">200</td>
<td align="right">225</td>
<td align="right">250</td>
<td align="right">275</td>
<td align="right">300</td>
<td align="right">350</td>
</tr>
<tr>
<td>Blackcurrant</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
</tr>
<tr>
<td>Blueberry</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
<td align="right">24</td>
<td align="right">28</td>
<td align="right">30</td>
<td align="right">36</td>
</tr>
<tr>
<td>Boysenberry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">4</td>
<td align="right">5.5</td>
<td align="right">7</td>
<td align="right">8.5</td>
<td align="right">10</td>
<td align="right">11.5</td>
<td align="right">13</td>
<td align="right">14.5</td>
<td align="right">16</td>
<td align="right">17.5</td>
<td align="right">19</td>
<td align="right">20.5</td>
<td align="right">22</td>
</tr>
<tr>
<td>Cherry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">5</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">28</td>
<td align="right">31</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Coconut</td>
<td align="right">0.1</td>
<td align="right">0.25</td>
<td align="right">0.5</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
</tbody>
</table>

Your html makes your task far more difficult then it needs to be. The fact that your select options do not directly relate to the table you need a value from is likely your main source of grief. This answer leaves your HTML alone and works with it. For a simpler solution I recommend;
Give your reference tables an ID, and make that ID the value of the origin select options.
Give your table cells an attribute that relates or is the value of the related volume select option.
EXAMPLE of HTML changes
<table id="origin_1">
<thead>...Europe...<thead>
<tbody>
<tr product='apple'>...<td volume='1000'>0.5</td>...</tr>
</tbody>
</table>
$("input[type='text'].element").blur(function(e) {
var result = $("<span name='result'>");
var multiplier = $(`table#${$("#element_2").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#element_1>option:selected").val()}']`).text();
$(this).next("span").remove();
result.text($(this).val() * multiplier);
$(this).after(result);
});
EXISTING HTML SNIPPET
$("input[type='text'].element").blur(function(e) {
//get the origin
var origin = $("#element_2>option:selected").text();
//get the right lookup table (would be simpler if it had an ID with the value of the ORIGIN select)
var $tblOrig = $($("table>thead>tr>th:first-child()>strong")
.filter((index, elem) => $(elem).text().includes(origin)).closest("table"));
//get the volume
var volume = $("#element_1>option:selected").val();
//calculate the targeted table row, we can use the ID for this
var product_ord = $(this).attr("id").split("_")[1];
//get the cell number that we need (would be easier of the value of the volume option was the index)
var volume_ord =
$("#element_1>option").map((i, e) => {
return e.value == volume ? {
index: i + 1
} : null;
})[0].index;
//console.log(volume_ord);
//get the multiplier
//make somewhere to store the answer
var result = $("<span name='result'>");
//get the value from the right cell
var multiplier = $tblOrig
.find(`tbody > tr:nth-child(${product_ord}) > td:nth-child(${volume_ord})`).text();
//console.log(multiplier);
//remove a previous answer if there is one
$(this).next("span").remove();
//get the new answer
result.text($(this).val() * multiplier);
//put it after the text input
$(this).after(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label class="description" for="element_2">Product Origin</label>
<select class="element select medium" id="element_2" name="element_2">
<option value="" selected="selected"></option>
<option value="1">Europe</option>
<option value="2">Asia</option>
<option value="3">China</option>
<option value="3">India</option>
<option value="3">USA</option>
<option value="3">Africa</option>
</select>
</div>
<div>
<label class="description" for="element_1">Volume</label>
<select class="element select medium" id="element_1" name="element_1">
<option value="" selected="selected"></option>
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
<option value="6000">6000</option>
<option value="6000">6000</option>
<option value="8000">8000</option>
<option value="9000">9000</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
</div>
<div>
<label class="description" for="element_1">Apple </label>
<input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_2">Apricot </label>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_3">Banana </label>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_4">Bilberry </label>
<input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_5">Blackberry </label>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_6">Blackcurrant </label>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_7">Blueberry </label>
<input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_8">Boysenberry </label>
<input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_9">Cherry </label>
<input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="element_10">Coconut </label>
<input id="element_10" name="element_10" class="element text medium" type="text" maxlength="255" value="" />
</div>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th title="Field #1"><strong>Category 1: Origin Europe</strong></th>
<th title="Field #2"><strong>10</strong></th>
<th title="Field #3"><strong>100</strong></th>
<th title="Field #4"><strong>1000</strong></th>
<th title="Field #5"><strong>2000</strong></th>
<th title="Field #6"><strong>3000</strong></th>
<th title="Field #7"><strong>4000</strong></th>
<th title="Field #8"><strong>5000</strong></th>
<th title="Field #9"><strong>6000</strong></th>
<th title="Field #10"><strong>7000</strong></th>
<th title="Field #11"><strong>8000</strong></th>
<th title="Field #12"><strong>9000</strong></th>
<th title="Field #13"><strong>1000</strong></th>
<th title="Field #14"><strong>10000</strong></th>
<th title="Field #15"><strong>20000</strong></th>
<th title="Field #16"><strong>30000</strong></th>
<th title="Field #17"><strong>40000</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">3</td>
<td align="right">4</td>
<td align="right">5</td>
<td align="right">6</td>
<td align="right">7</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">10</td>
<td align="right">11</td>
<td align="right">12</td>
<td align="right">13</td>
<td align="right">14</td>
</tr>
<tr>
<td>Apricot</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1.5</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3.5</td>
<td align="right">4</td>
<td align="right">4.5</td>
<td align="right">5</td>
<td align="right">5.5</td>
<td align="right">6</td>
<td align="right">7</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">5</td>
<td align="right">6</td>
<td align="right">7</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
</tr>
<tr>
<td>Bilberry</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">30</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
<td align="right">60</td>
<td align="right">65</td>
<td align="right">70</td>
</tr>
<tr>
<td>Blackberry</td>
<td align="right">0.1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">20</td>
<td align="right">50</td>
<td align="right">75</td>
<td align="right">100</td>
<td align="right">125</td>
<td align="right">150</td>
<td align="right">175</td>
<td align="right">200</td>
<td align="right">225</td>
<td align="right">250</td>
<td align="right">275</td>
<td align="right">300</td>
<td align="right">350</td>
</tr>
<tr>
<td>Blackcurrant</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
</tr>
<tr>
<td>Blueberry</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
<td align="right">24</td>
<td align="right">28</td>
<td align="right">30</td>
<td align="right">36</td>
</tr>
<tr>
<td>Boysenberry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">4</td>
<td align="right">5.5</td>
<td align="right">7</td>
<td align="right">8.5</td>
<td align="right">10</td>
<td align="right">11.5</td>
<td align="right">13</td>
<td align="right">14.5</td>
<td align="right">16</td>
<td align="right">17.5</td>
<td align="right">19</td>
<td align="right">20.5</td>
<td align="right">22</td>
</tr>
<tr>
<td>Cherry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">5</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">28</td>
<td align="right">31</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Coconut</td>
<td align="right">0.1</td>
<td align="right">0.25</td>
<td align="right">0.5</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
</br>
</br>
<td><strong>Category 2 Origin Asia</strong></td>
<td align="right"><strong>10</strong></td>
<td align="right"><strong>100</strong></td>
<td align="right"><strong>1000</strong></td>
<td align="right"><strong>2000</strong></td>
<td align="right"><strong>3000</strong></td>
<td align="right"><strong>4000</strong></td>
<td align="right"><strong>5000</strong></td>
<td align="right"><strong>6000</strong></td>
<td align="right"><strong>7000</strong></td>
<td align="right"><strong>8000</strong></td>
<td align="right"><strong>9000</strong></td>
<td align="right"><strong>1000</strong></td>
<td align="right"><strong>10000</strong></td>
<td align="right"><strong>20000</strong></td>
<td align="right"><strong>30000</strong></td>
<td align="right"><strong>40000</strong></td>
</tr>
<tr>
<td>Apple</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">17.7</td>
<td align="right">21.5</td>
<td align="right">25.3</td>
<td align="right">29.1</td>
<td align="right">32.9</td>
<td align="right">36.7</td>
<td align="right">40.5</td>
<td align="right">44.3</td>
<td align="right">48.1</td>
<td align="right">51.9</td>
</tr>
<tr>
<td>Apricot</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1.5</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3.5</td>
<td align="right">4</td>
<td align="right">4.5</td>
<td align="right">5</td>
<td align="right">5.5</td>
<td align="right">6</td>
<td align="right">7</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">27</td>
<td align="right">30</td>
<td align="right">33</td>
<td align="right">36</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Bilberry</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">30</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
<td align="right">60</td>
<td align="right">65</td>
<td align="right">70</td>
<td align="right">75</td>
</tr>
<tr>
<td>Blackberry</td>
<td align="right">0.1</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">20</td>
<td align="right">50</td>
<td align="right">75</td>
<td align="right">100</td>
<td align="right">125</td>
<td align="right">150</td>
<td align="right">175</td>
<td align="right">200</td>
<td align="right">225</td>
<td align="right">250</td>
<td align="right">275</td>
<td align="right">300</td>
<td align="right">350</td>
</tr>
<tr>
<td>Blackcurrant</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
</tr>
<tr>
<td>Blueberry</td>
<td align="right">0.1</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">12</td>
<td align="right">14</td>
<td align="right">16</td>
<td align="right">18</td>
<td align="right">20</td>
<td align="right">24</td>
<td align="right">28</td>
<td align="right">30</td>
<td align="right">36</td>
</tr>
<tr>
<td>Boysenberry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">4</td>
<td align="right">5.5</td>
<td align="right">7</td>
<td align="right">8.5</td>
<td align="right">10</td>
<td align="right">11.5</td>
<td align="right">13</td>
<td align="right">14.5</td>
<td align="right">16</td>
<td align="right">17.5</td>
<td align="right">19</td>
<td align="right">20.5</td>
<td align="right">22</td>
</tr>
<tr>
<td>Cherry</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">2.5</td>
<td align="right">5</td>
<td align="right">8</td>
<td align="right">10</td>
<td align="right">15</td>
<td align="right">20</td>
<td align="right">25</td>
<td align="right">28</td>
<td align="right">31</td>
<td align="right">35</td>
<td align="right">40</td>
<td align="right">45</td>
<td align="right">50</td>
<td align="right">55</td>
</tr>
<tr>
<td>Coconut</td>
<td align="right">0.1</td>
<td align="right">0.25</td>
<td align="right">0.5</td>
<td align="right">0.5</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">2.5</td>
<td align="right">2.5</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
</tbody>
</table>

$("input[type='text'].element").blur(function(e) {
var result = $("<span name='result'>");
var multiplier = $(`table#${$("#ProductOrigin").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']`).text();
$(this).next("span").remove();
result.text($(this).val() * multiplier);
$(this).after(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label class="description" for="ProductOrigin">Product Origin</label>
<select class="element select medium" id="ProductOrigin" name="ProductOrigin">
<option value="" selected="selected"></option>
<option value="Europe">Europe</option>
<option value="Asia">Asia</option>
<option value="China">China</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Africa">Africa</option>
</select>
</div>
<div>
<label class="description" for="Volume">Volume</label>
<select class="element select medium" id="Volume" name="Volume">
<option value="" selected="selected"></option>
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
<option value="6000">6000</option>
<option value="6000">6000</option>
<option value="8000">8000</option>
<option value="9000">9000</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
</div>
<div>
<label class="description" for="Apple">Apple</label>
<input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Apricot">Apricot</label>
<input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Banana">Banana</label>
<input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Bilberry">Bilberry</label>
<input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Blackberry">Blackberry</label>
<input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Blackcurrant">Blackcurrant</label>
<input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Blueberry">Blueberry</label>
<input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Boysenberry">Boysenberry</label>
<input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Cherry">Cherry</label>
<input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
<label class="description" for="Coconut">Coconut</label>
<input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="" />
</div>
<table id="Europe">
<thead>Europe</thead>
<tr>
<td>Europe</td>
<th id=10>10</th>
<th id=100>100</th>
<th id=1000>1000</th>
<th id=2000>2000</th>
<th id=3000>3000</th>
<th id=4000>4000</th>
<th id=5000>5000</th>
<th id=6000>6000</th>
<th id=7000>7000</th>
<th id=8000>8000</th>
<th id=9000>9000</th>
<th id=10000>10000</th>
<th id=20000>20000</th>
<th id=30000>30000</th>
<th id=40000>40000</th>
<th id=50000>50000</th>
</tr>
<tbody>
<tr product='Apple'>
<td>Apple</td>
<td volume='10'>0.1</td>
<td volume='100'>0.5</td>
<td volume='1000'>1</td>
<td volume='2000'>2</td>
<td volume='3000'>3</td>
<td volume='4000'>4</td>
<td volume='5000'>5</td>
<td volume='6000'>6</td>
<td volume='7000'>7</td>
<td volume='8000'>8</td>
<td volume='9000'>9</td>
<td volume='10000'>10</td>
<td volume='20000'>11</td>
<td volume='30000'>12</td>
<td volume='40000'>13</td>
<td volume='50000'>14</td>
</tr>
<tr product='Apricot'>
<td>Apricot</td>
<td volume='10'>0</td>
<td volume='100'>0</td>
<td volume='1000'>0</td>
<td volume='2000'>0.5</td>
<td volume='3000'>1</td>
<td volume='4000'>1.5</td>
<td volume='5000'>2</td>
<td volume='6000'>2.5</td>
<td volume='7000'>3</td>
<td volume='8000'>3.5</td>
<td volume='9000'>4</td>
<td volume='10000'>4.5</td>
<td volume='20000'>5</td>
<td volume='30000'>5.5</td>
<td volume='40000'>6</td>
<td volume='50000'>7</td>
</tr>
<tr product='Banana'>
<td>Banana</td>
<td volume='10'>0.1</td>
<td volume='100'>0.5</td>
<td volume='1000'>1</td>
<td volume='2000'>5</td>
<td volume='3000'>10</td>
<td volume='4000'>15</td>
<td volume='5000'>20</td>
<td volume='6000'>25</td>
<td volume='7000'>27</td>
<td volume='8000'>30</td>
<td volume='9000'>33</td>
<td volume='10000'>36</td>
<td volume='20000'>40</td>
<td volume='30000'>45</td>
<td volume='40000'>50</td>
<td volume='50000'>55</td>
</tr>
<tr product='Bilberry'>
<td>Bilberry</td>
<td volume='10'>1</td>
<td volume='100'>5</td>
<td volume='1000'>10</td>
<td volume='2000'>15</td>
<td volume='3000'>20</td>
<td volume='4000'>25</td>
<td volume='5000'>30</td>
<td volume='6000'>35</td>
<td volume='7000'>40</td>
<td volume='8000'>45</td>
<td volume='9000'>50</td>
<td volume='10000'>55</td>
<td volume='20000'>60</td>
<td volume='30000'>65</td>
<td volume='40000'>70</td>
<td volume='50000'>75</td>
</tr>
<tr product='Blackberry'>
<td>Blackberry</td>
<td volume='10'>0.1</td>
<td volume='100'>5</td>
<td volume='1000'>10</td>
<td volume='2000'>20</td>
<td volume='3000'>50</td>
<td volume='4000'>75</td>
<td volume='5000'>100</td>
<td volume='6000'>125</td>
<td volume='7000'>150</td>
<td volume='8000'>175</td>
<td volume='9000'>200</td>
<td volume='10000'>225</td>
<td volume='20000'>250</td>
<td volume='30000'>275</td>
<td volume='40000'>300</td>
<td volume='50000'>350</td>
</tr>
<tr product='Blackcurrant'>
<td>Blackcurrant</td>
<td volume='10'>0.1</td>
<td volume='100'>0.5</td>
<td volume='1000'>1</td>
<td volume='2000'>2</td>
<td volume='3000'>2</td>
<td volume='4000'>4</td>
<td volume='5000'>4</td>
<td volume='6000'>4</td>
<td volume='7000'>6</td>
<td volume='8000'>6</td>
<td volume='9000'>6</td>
<td volume='10000'>8</td>
<td volume='20000'>8</td>
<td volume='30000'>10</td>
<td volume='40000'>12</td>
<td volume='50000'>14</td>
</tr>
<tr product='Blueberry'>
<td>Blueberry</td>
<td volume='10'>0.1</td>
<td volume='100'>0.5</td>
<td volume='1000'>1</td>
<td volume='2000'>4</td>
<td volume='3000'>6</td>
<td volume='4000'>8</td>
<td volume='5000'>10</td>
<td volume='6000'>12</td>
<td volume='7000'>14</td>
<td volume='8000'>16</td>
<td volume='9000'>18</td>
<td volume='10000'>20</td>
<td volume='20000'>24</td>
<td volume='30000'>28</td>
<td volume='40000'>30</td>
<td volume='50000'>36</td>
</tr>
<tr product='Boysenberry'>
<td>Boysenberry</td>
<td volume='10'>0.5</td>
<td volume='100'>1</td>
<td volume='1000'>2.5</td>
<td volume='2000'>4</td>
<td volume='3000'>5.5</td>
<td volume='4000'>7</td>
<td volume='5000'>8.5</td>
<td volume='6000'>10</td>
<td volume='7000'>11.5</td>
<td volume='8000'>13</td>
<td volume='9000'>14.5</td>
<td volume='10000'>16</td>
<td volume='20000'>17.5</td>
<td volume='30000'>19</td>
<td volume='40000'>20.5</td>
<td volume='50000'>22</td>
</tr>
<tr product='Cherry'>
<td>Cherry</td>
<td volume='10'>0.5</td>
<td volume='100'>1</td>
<td volume='1000'>2.5</td>
<td volume='2000'>5</td>
<td volume='3000'>8</td>
<td volume='4000'>10</td>
<td volume='5000'>15</td>
<td volume='6000'>20</td>
<td volume='7000'>25</td>
<td volume='8000'>28</td>
<td volume='9000'>31</td>
<td volume='10000'>35</td>
<td volume='20000'>40</td>
<td volume='30000'>45</td>
<td volume='40000'>50</td>
<td volume='50000'>55</td>
</tr>
<tr product='Coconut'>
<td>Coconut</td>
<td volume='10'>0.1</td>
<td volume='100'>0.25</td>
<td volume='1000'>0.5</td>
<td volume='2000'>0.5</td>
<td volume='3000'>1</td>
<td volume='4000'>1</td>
<td volume='5000'>2</td>
<td volume='6000'>2</td>
<td volume='7000'>2</td>
<td volume='8000'>2</td>
<td volume='9000'>2.5</td>
<td volume='10000'>2.5</td>
<td volume='20000'>3</td>
<td volume='30000'>3</td>
<td volume='40000'>3</td>
<td volume='50000'>3</td>
</tr>
</tbody>
</table>
Calculate dropdown matching Tables
This is working version.

Table horizontal and vertical scroll with fixed header

i work in rails, i have a table and want to add horizontal and vertical scroll with fixed header, detail like that :
table have fixed width and high
table can horizontal and vertical scroll
headers are the first row, the last row and the first column
always see these headers above
when horizontal scroll, only the first column fixed
when vertical scroll, the first row and the last row fixed
This is my currenty code :
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid orange;
}
td {
margin:0;
border:1px solid grey;
border-top-width:0px;
white-space:nowrap;
}
div.second {
width: 600px;
overflow-x:scroll;
overflow-y:visible;
margin-left:5em;
padding-bottom:1px;
height: auto;
}
div.first {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
height: 150px;
padding-bottom: 1px;
position: absolute;
left:0;
top:auto;
}
.headcol {
position: absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px; /*only relevant for first row*/
margin-top:-3px; /*compensate for top border*/
background:grey;
}
.headrow {
position: absolute;
width:100px;
left: 5em;
}
.long {
background:yellow;
}
<div id="scroll-table">
<div class="first">
<div class="second">
<table>
<thead>
<tr>
<td class="headcol">1 - 1</td>
<div class="headrow">
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
</div>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I think to need to use javascript
Can you help me about it ?
Thanks

Jquery and CSS add on HTML code

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

How to hide table class until data is returned?

As indicated in the code. The user enters data into one of the 6 input boxes. Query results are returned in (example: <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE" name="PROC_CODE"> </td>)
I need to have the blank <td><tr> hidden unless query results are returned.
The code is long but fairly simple and straight forward. Basically the user queries 1 record, 1 record displays. User queries 4 records 4 records display.
I already have the db working and pulling the results I need I just don't know how to hide the blank tables data
enter code here
<body style="text-align: center">
<a name="top"></a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- xxxxxxx Logo -->
<td height="50" width="150">
<a href="http://xxxxxxx.xxxxxxx.com"><img src="http://xxxxxxx.xxxxxxx.com/contentowners/xxxxxxx_template/js/images/xxxxxxx_50.gif" alt="xxxxxxx" width="150"
height="50" border="0"></a>
</td>
<!-- xxxxxxx Search -->
<td height="50" align="right">
<iframe src="/provider_services/search.html" name="search" id="search" width="475" height="50" marginwidth="0" marginheight="0" align="right" scrolling="no" frameborder="0"></iframe>
</td>
</tr>
<tr>
<!-- Current Date -->
<td height="28" align="center" bgcolor="#CCFF66" class="smblue">
<script language="JavaScript" type="text/javascript" src="http://xxxxxxx.xxxxxxx.com/contentowners/xxxxxxx_template/js/date_short.js">
</script>
</td>
<td height="28" bgcolor="#99CC33">
<!-- Top Navigation (optional for your site) -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="topnav" id="TOPNAV"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- left col -->
<td width="150" valign="top" bgcolor="#ADD1EE">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<!-- Insert your site name here -->
<!-- Link this text to your homepage or main index -->
<h5 align="center" class="white"><img src="../../images/psc_logo_150x150.jpg" width="150" height="150"></h5></td>
<body onLoad="loadCommon();" style="text-align: center">
<script src="../../psc_nav_bar.js" language="javascript" type="text/javascript"></script>
<td class="leftnav" id="LEFTNAV">
</table>
</td>
<!--center col -->
<td valign="top">
<!-- begin content table -->
<form action="" method="post" name="frmTracking" id="frmTracking" onReset="clearControls(this);">
<input type="hidden" name="recordID" value="">
<p>
<br> <table width="100%" border="0" align="center">
<tr align="left">
<td align="left"> <p><U><strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br></p>
</td>
</tr>
</table>
<table width="100%" border="0" align="center">
<tr align="left">
<td align="left">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
<input name="searchRecord" id="searchRecord" type="text" size="8" maxlength="8">
</td>
</tr>
<td> <div id="TRACKBUTTONS" align="center">
<input type="button" name="btnFind" value="Find"
class="cmdBtn" onClick="return getDBRecord(this.form);"><input type="button" name="reset_form" value="Clear" onclick="this.form.reset(); history.go(0) " >
<!-- <input type="button" name="btnSave" value="Save" class="cmdBtn" title="Save current entry" onClick="return updateDBRecord(this.form);"> -->
</div></td>
</table>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP"> </td>
</td>
<td class="tLBL1l" id="DETAILS3"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record1</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE1" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE1" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS1"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID1"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP1"> </td>
</td>
<td class="tLBL1l" id="DETAILS31"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER1"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL1"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<!--3rd set -->
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record2</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE2" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE2" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS2"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID2"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP2"> </td>
</td>
<td class="tLBL1l" id="DETAILS32"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER2"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL2"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<!--4th set -->
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record3</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE3" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE3" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS3"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID3"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP3"> </td>
</td>
<td class="tLBL1l" id="DETAILS33"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER3"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL3"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<!--5th set -->
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record4</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE4" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE4" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS4"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID4"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP4"> </td>
</td>
<td class="tLBL1l" id="DETAILS34"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER4"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL4"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<!--6th set -->
<tr bgcolor="#F0F0F0">
<td colspan="5" align="center" class="th2">Procedure Code Record5</td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure Code </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="PROC_CODE5" name="PROC_CODE"> </td>
</tr>
<tr bgcolor="#F0F0F0">
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Medicare Advantage </td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="MEDICARE5" name="MEDICARE"> </td>
</tr>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Procedure</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="STATUS5"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Specialty</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td width="55%" class="tLBL1l" id="xxxxxxx_ID5"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Precert Type
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1">
<td width="55%" class="tLBL1l" id="SYS_APP5"> </td>
</td>
<td class="tLBL1l" id="DETAILS35"> </td>
<td width="1%" class="tdFieldHeadingsR1"> </td>
<td width="5%" class="tLBL1l" id="td"> </td>
<tr>
<td width="12%" align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Review Type:</td>
<td width="1%" align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="SUBMITTER5"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td"> </td>
<tr>
<td align="right" bgcolor="#CCCCCC" class="tdFieldHeadingsR1">Guidelines:</td>
<td align="right" bgcolor="#FFFFFF" class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="EMAIL5"> </td>
<td class="tdFieldHeadingsR1"> </td>
<td class="tLBL1l" id="td4"> </td>
<!-- <tr id="rowTIN">
<td align="right" class="tdFieldHeadingsR">Change Status</td>
<td class="tdFieldHeadingsR"> </td>
<td colspan="3" class="tdFieldHeadingsR"><!-- <input name="txtTinPin" type="text" title="TIN/PIN" value="" size="12"> -->
<!-- <label for="txtTinPin"></label>
<select name="txtTinPin2" size="1" id="txtTinPin">
<option value="Open" selected>Open</option>
<option value="Closed">Closed</option>
</select></td>
</tr>
<tr id="rowControlNumber">
<td align="right" valign="top" class="tdFieldHeadingsR">Handler Notes</td>
<td class="tdFieldHeadingsR"> </td>
<td colspan="3" class="tdFieldHeadingsR"><textarea name="txtControl" cols="50" rows="8" title="Handler Notes"></textarea></td>
</tr> -->
<tr align="center">
<td colspan="5">
<p></p>
</td>
</tr>
</table>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td valign="top">
<p align="center">
<img src="http://xxxxxxx.xxxxxxx.com/contentowners/xxxxxxx_template/js/images/up_arrow.gif" alt="" width="12" height="13" border="0" align="middle"> top of page</td>
<!-- Right column for boxes -->
</tr>
</table>
<!-- end content table -->
</td>
</tr>
<!-- end center column -->
<tr>
<td colspan="2">
<hr size="1">
</td>
</tr>
</table>
<a href="http://www.xxxxxxx.com/">
<img src=
"http://xxxxxxx.xxxxxxx.com/contentowners/xxxxxxx_template/js/images/logo_footer.gif" alt="xxxxxxx" width="149" height="65" border="0" align="right"></a>
<!-- begin footer -->
<p align="left" class="pubinfo" id="PUBINFO">
</body>

give table some id and call $(tableId).hide(); Optionally you may want to show the table but disable it until data is returned

Categories