We Keep Coding

HTML: How to split list (of <tr>-s) into multiple chunks with keeping the header?

I have a list that is too long, and it is needed to fit without scrolling, but I can't figure out how to split this into 2 or 3 or 4 chunks. I copied a list below, the real list is having 200 or more rows of data. Let's say I'd like to have chunks with no more than 3 rows inside.
Is it possible to make more than one chunk of this and keeping the header too?
(The data comes from an SQL selection and constantly changing).
<div id="FIller1" class="dbtable">
<thead>
<tr>
<td class="b3">Filled ID1</td>
<td class="n3">Filled ID2</td>
<td class="n3">Filled ID3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="index"><span>110</span></td>
<td class="n2"><span>110-2</span></td>
<td class="b2"><span>AAA</span></td>
</tr>
<tr>
<td class="index"><span>111</span></td>
<td class="n2"><span>111-2</span></td>
<td class="b2"><span>BBB</span></td>
</tr>
<tr>
<td class="index"><span>112</span></td>
<td class="n2"><span>112-2</span></td>
<td class="b2"><span>CCC</span></td>
</tr>
<tr>
<td class="index"><span>113</span></td>
<td class="n2"><span>113-2</span></td>
<td class="b2"><span>DDD</span></td>
</tr>
<tr>
<td class="index"><span>114</span></td>
<td class="n2"><span>114-2</span></td>
<td class="b2"><span>EEE</span></td>
</tr>
<tr>
<td class="index"><span>115</span></td>
<td class="n2"><span>115-2</span></td>
<td class="b2"><span>FFF</span></td>
</tr>
<tr>
<td class="index"><span>116</span></td>
<td class="n2"><span>116-2</span></td>
<td class="b2"><span>GGG</span></td>
</tr>
</tbody>
</div>

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

Deleting duplicate adjacent td elements using jquery

I've the html code as shown below.
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
<tr/>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
In the above html code, there are few duplicate components present in adjacent properties column. Is there a way we can identify those duplicate components from properties column and delete them?
In the above example, two components CatalogTools and InventoryManager are present in properties column. Because of this, their respective properties have moved to an adjacent column on the right side.
The above html code might look faulty as it is generated from server, so I want to tidy up with jquery.
Eventually, I'm looking for an html as shown in this screenshot.
If you need some more details, please do let me know.
Thanks in advance.

var dups = $('.comps + .comps')
dups.remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
<tr/>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
<tr/>
<tr/>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
<tr/>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
<tr/>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
<tr/>
<tr/>
</tr>
</tr>
</table>
</div>

How do I parse html in an external file from Javascript

I feel like I should know this, but as I'm sitting down trying to access an html file from my Javascript I don't really know where to start. I am using jQuery so do I just want to use jQuery.ajax()?
The external html is a table with various premium values, stored on the same domain but in a separate directory. When a user enters their birth year previously in the form and selects whether or not they are male or female and a smoker or non-smoker, I return specific values based on their age.
In the table below if they were 21, male, non-smoker i'd want to return the value in the mns cell from row #id21.
<table id="premiumRateTable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th id="age">Age Next Birthday</th>
<th id="cover">Default Cover</th>
<th id="mns">Male Non-smoker</th>
<th id="ms">Male Smoker</th>
<th id="fns">Female Non-smoker</th>
<th id="fs">Female Smoker</th>
</tr>
</thead>
<tbody>
<tr id="id20">
<td headers="age">20</td>
<td headers="cover">$100,000</td>
<td headers="mns">$108.99</td>
<td headers="ms">$154.55</td>
<td headers="fns">$44.31</td>
<td headers="fs">$68.61</td>
</tr>
<tr id="id21">
<td headers="age">21</td>
<td headers="cover">$150,000</td>
<td headers="mns">$160.81</td>
<td headers="ms">$229.15</td>
<td headers="fns">$58.16</td>
<td headers="fs">$77.48</td>
</tr>
<tr id="id22">
<td headers="age">22</td>
<td headers="cover">$150,000</td>
<td headers="mns">$139.37</td>
<td headers="ms">$199.167</td>
<td headers="fns">$58.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id23">
<td headers="age">23</td>
<td headers="cover">$150,000</td>
<td headers="mns">$128.64</td>
<td headers="ms">$183.59</td>
<td headers="fns">$56.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id24">
<td headers="age">24</td>
<td headers="cover">$150,000</td>
<td headers="mns">$121.94</td>
<td headers="ms">$172.87</td>
<td headers="fns">$58.29</td>
<td headers="fs">$79.90</td>
</tr>
<tr id="id25">
<td headers="age">25</td>
<td headers="cover">$150,000</td>
<td headers="mns">$112.56</td>
<td headers="ms">$158.13</td>
<td headers="fns">$61.11</td>
<td headers="fs">$84.91</td>
</tr>
</tbody>
</table>

Load the table once ($(document).ready()) and add it to an invisible element at the end of the body.
var dummyDiv = $("<div id='dummyDiv'/>").css("display","none");
dummyDiv.load("otherpage.html #id"+age);
dummyDiv.css("display","none");
$("body").append(dummyDiv);
And then you can run this code from anywhere to get the values from that table.
var dummyDiv = $("#dummyDiv");
var valYouWant = "mns"; //example value to grab
var value = dummyDiv.find('td[headers="'+valYouWant+'"]').text();
//do whatever you'd like with 'value'

How to make a table cell input for a form

I have to submit in a form a value containing the value of a starting poker hand.
I thought to make a table with all the possible poker hands so the user can choose one from them.
This is the code I've written to create the table:
<table cellspacing="3" cellpadding="0" id="table">
<tbody>
<tr><td></td><td>A</td><td>K</td><td>Q</td><td>J</td><td>T</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr>
<tr class="row">
<td>A</td>
<td id="AA">AA</td>
<td id="AKs">AKs</td>
<td id="AQs">AQs</td>
<td id="AJs">AJs</td>
<td id="ATs">ATs</td>
<td id="A9s">A9s</td>
<td id="A8s">A8s</td>
<td id="A7s">A7s</td>
<td id="A6s">A6s</td>
<td id="A5s">A5s</td>
<td id="A4s">A4s</td>
<td id="A3s">A3s</td>
<td id="A2s">A2s</td>
</tr>
<tr class="row">
<td>K</td>
<td id="AKo">AKo</td>
<td id="KK">KK</td>
<td id="KQs">KQs</td>
<td id="KJs">KJs</td>
<td id="KTs">KTs</td>
<td id="K9s">K9s</td>
<td id="K8s">K8s</td>
<td id="K7s">K7s</td>
<td id="K6s">K6s</td>
<td id="K5s">K5s</td>
<td id="K4s">K4s</td>
<td id="K3s">K3s</td>
<td id="K2s">K2s</td>
</tr>
<tr class="row">
<td>Q</td>
<td id="AQo">AQo</td>
<td id="KQo">KQo</td>
<td id="QQ">QQ</td>
<td id="QJs">QJs</td>
<td id="QTs">QTs</td>
<td id="Q9s">Q9s</td>
<td id="Q8s">Q8s</td>
<td id="Q7s">Q7s</td>
<td id="Q6s">Q6s</td>
<td id="Q5s">Q5s</td>
<td id="Q4s">Q4s</td>
<td id="Q3s">Q3s</td>
<td id="Q2s">Q2s</td>
</tr>
<tr class="row">
<td>J</td>
<td id="AJo">AJo</td>
<td id="KJo">KJo</td>
<td id="QJo">QJo</td>
<td id="JJ">JJ</td>
<td id="JTs">JTs</td>
<td id="J9s">J9s</td>
<td id="J8s">J8s</td>
<td id="J7s">J7s</td>
<td id="J6s">J6s</td>
<td id="J5s">J5s</td>
<td id="J4s">J4s</td>
<td id="J3s">J3s</td>
<td id="J2s">J2s</td>
</tr>
<tr class="row">
<td>T</td>
<td id="ATo">ATo</td>
<td id="KTo">KTo</td>
<td id="QTo">QTo</td>
<td id="JTo">JTo</td>
<td id="TT">TT</td>
<td id="T9s">T9s</td>
<td id="T8s">T8s</td>
<td id="T7s">T7s</td>
<td id="T6s">T6s</td>
<td id="T5s">T5s</td>
<td id="T4s">T4s</td>
<td id="T3s">T3s</td>
<td id="T2s">T2s</td>
</tr>
<tr class="row">
<td>9</td>
<td id="A9o">A9o</td>
<td id="K9o">K9o</td>
<td id="Q9o">Q9o</td>
<td id="J9o">J9o</td>
<td id="T9o">T9o</td>
<td id="99">99</td>
<td id="98s">98s</td>
<td id="97s">97s</td>
<td id="96s">96s</td>
<td id="95s">95s</td>
<td id="94s">94s</td>
<td id="93s">93s</td>
<td id="92s">92s</td>
</tr>
<tr class="row">
<td>8</td>
<td id="A8o">A8o</td>
<td id="K8o">K8o</td>
<td id="Q8o">Q8o</td>
<td id="J8o">J8o</td>
<td id="T8o">T8o</td>
<td id="98o">98o</td>
<td id="88">88</td>
<td id="87s">87s</td>
<td id="86s">86s</td>
<td id="85s">85s</td>
<td id="84s">84s</td>
<td id="83s">83s</td>
<td id="82s">82s</td>
</tr>
<tr class="row">
<td>7</td>
<td id="A7o">A7o</td>
<td id="K7o">K7o</td>
<td id="Q7o">Q7o</td>
<td id="J7o">J7o</td>
<td id="T7o">T7o</td>
<td id="97o">97o</td>
<td id="87o">87o</td>
<td id="77">77</td>
<td id="76s">76s</td>
<td id="75s">75s</td>
<td id="74s">74s</td>
<td id="73s">73s</td>
<td id="72s">72s</td>
</tr>
<tr class="row">
<td>6</td>
<td id="A6o">A6o</td>
<td id="K6o">K6o</td>
<td id="Q6o">Q6o</td>
<td id="J6o">J6o</td>
<td id="T6o">T6o</td>
<td id="96o">96o</td>
<td id="86o">86o</td>
<td id="76o">76o</td>
<td id="66">66</td>
<td id="65s">65s</td>
<td id="64s">64s</td>
<td id="63s">63s</td>
<td id="62s">62s</td>
</tr>
<tr class="row">
<td>5</td>
<td id="A5o">A5o</td>
<td id="K5o">K5o</td>
<td id="Q5o">Q5o</td>
<td id="J5o">J5o</td>
<td id="T5o">T5o</td>
<td id="95o">95o</td>
<td id="85o">85o</td>
<td id="75o">75o</td>
<td id="65o">65o</td>
<td id="55">55</td>
<td id="54s">54s</td>
<td id="53s">53s</td>
<td id="52s">52s</td>
</tr>
<tr class="row">
<td>4</td>
<td id="A4o">A4o</td>
<td id="K4o">K4o</td>
<td id="Q4o">Q4o</td>
<td id="J4o">J4o</td>
<td id="T4o">T4o</td>
<td id="94o">94o</td>
<td id="84o">84o</td>
<td id="74o">74o</td>
<td id="64o">64o</td>
<td id="54o">54o</td>
<td id="44">44</td>
<td id="43s">43s</td>
<td id="42s">42s</td>
</tr>
<tr class="row">
<td>3</td>
<td id="A3o">A3o</td>
<td id="K3o">K3o</td>
<td id="Q3o">Q3o</td>
<td id="J3o">J3o</td>
<td id="T3o">T3o</td>
<td id="93o">93o</td>
<td id="83o">83o</td>
<td id="73o">73o</td>
<td id="63o">63o</td>
<td id="53o">53o</td>
<td id="43o">43o</td>
<td id="33">33</td>
<td id="32s">32s</td>
</tr>
<tr class="row">
<td>2</td>
<td id="A2o">A2o</td>
<td id="K2o">K2o</td>
<td id="Q2o">Q2o</td>
<td id="J2o">J2o</td>
<td id="T2o">T2o</td>
<td id="92o">92o</td>
<td id="82o">82o</td>
<td id="72o">72o</td>
<td id="62o">62o</td>
<td id="52o">52o</td>
<td id="42o">42o</td>
<td id="32o">32o</td>
<td id="22">22</td>
</tr>
</tbody></table>
</td></tr>
</table>
I'd like to allow the user to select his hand by clicking on it and then submit the value in the form. How can I achieve this?

Something like this? If you change the type of result into hidden you can submit the cards as a string.
To select a table cell you have to attach an event listener to it and keep track about what has been selected (or unselected again).

jQuery (within the $(document).ready() function, or after the table was created)
$('td').click(function(){
var hand = $(this).attr('id');
});

The number of possible poker hands is 2,598,960, so you don’t want to create a table of them. Instead, create a set of 52 items, each consisting of a check box and associated label, which identifies a card. Add JavaScript code to check that exactly 5 boxes have been selected when the form is submitted.