We Keep Coding

Data transfer to the correct table row

so let me start from the beginning Two timers one timer is where u select when the meeting starts and one where u select the ending of the meeting, i also have a table.
first of all both timers are in another html so I used LocalStorage to get the values of the timers here on the Main html
Now the table it made from 14 rows and 3 columns
First column is with hours starting from 07:00 AM and ending at 20:00 PM
Second column will be filled with names of the meetings
And third column will be filled with the duration of the meeting
I also have a for that reads all the table column values and if it finds the same time as the time entered in the starting hour timer should add the duration of the meeting in on the third column with the id"ora",
and works fine but when it adds the meeting duration it always added on the first row !
So I need that he puts the duration of the meeting in the same row as the
Starting Hour.
Please help !
Here is the code :
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
<script>
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora").innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}

This is because you are duplicating the same id everywhere.
You can select the 3rd TD per startT(y) by a single selector:
`tr[id="${y}"] td:nth-child(3)`
Try now to Run example below & enjoy a single LINE javascript!
var y= prompt('What is start time?','09:00');
document.querySelector(`tr[id="${y}"] td:nth-child(3)`).innerHTML = 'SELECTED'
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>

It seems that the reason it shows up in the first "ora" row each time is because all of your id="ora"s are the same. If you number each one they will correspond to the time and be different:
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume7"></td>
<td id="ora7"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume8"></td>
<td id="ora8"></td>
</tr>
<!-- etc. -->
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume20"></td>
<td id="ora20"></td>
</tr>
</table>
Then in your script you can add the number to each id="ora":
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora" + [ic+8]).innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
The [ic + 8] adds from 0 in your loop to get the correct time slot.

How to find the next class from table which has a text value

i am trying to calculate the consumed volume from a table from each day (date with it's previous date).
When there are no table rows with empty volumes, this works correct.
But when there are some table rows which have empty volumes, it fails.
In code below you can see what i mean:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td> // text 30 (110 - 80)
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td> // text 50 (160 - 110)
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td> // text 60 (220 - 160)
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
$(this).siblings('.consumed').html(+next.html() - $(this).html())
})
Above works great but it fails when my table looks like this:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
Here is a fiddle how it should look like: Fiddle
So i need something like:
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')// find next volume if not empty!
$(this).siblings('.consumed').html(+next.html() - $(this).html()) // which belongs to a volume which is not empty!

You could get all next tr elements from the current one and then filter out the ones without the text and then take the first one from that result and that will be your next value.
$('.volume').each(function() {
const currentValue = $(this).text();
const nextValue = $(this)
.parent('tr')
.nextAll('tr')
.filter(function() {
return $(this).find('.volume').text().length;
}).first().find('.volume').text()
if (currentValue && nextValue) {
$(this).next('.consumed').text(
Number(nextValue) - Number(currentValue)
)
}
})
td.date, td.volume, td.consumed {
border: 1px solid #ccc;
padding: 5px;
}
h1 {
font-weight: bold;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Without empty volumes: shows correct</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
<!----------------------------------------------->
<br /><br />
<h1>With some empty volumes; now it fails</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>

+next.html() will create a NaN when there isn't a value there. Try +(next.html() || $(this).html()) instead.
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
var next_val = +(next.html() || $(this).html());
$(this).siblings('.consumed').html(next_val - $(this).html())
})
td{
border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

Easy way to attack it, look for the volume elements with text, do not select the trs elements.
var volumeElems = $(".volume").not(":empty");
volumeElems.each(function(index, elem){
if (index===volumeElems.length-1) return;
const currentElem = $(elem);
const curr = +currentElem.text();
const prev = +volumeElems.eq(index+1).text();
currentElem.next().text(prev-curr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

jquery change colors on dynamically created table by content

I have a div that is used to load a dynamically generated table.
So far I can generate the table and by using on("click" or "mouseover", function) achieve results but I need the table change when its loads.
At first I was using each() but it does not work on dynamic content so after reading more I changed it to on().
I don't want to click each cell for change to occur.
Code:
Jquery
$(function () {
$("#outputDiv2").on('click', "td", function () {
if ($(this).text() == 'notconnect') {
$(this).css('background-color', '#d5d5c3');
} else if ($(this).text() == 'connected') {
$(this).css('background-color', '#00e600');
} else if ($(this).text() == 'disabled') {
$(this).css('background-color', '#cc0000');
} else if ($(this).text() == 'err-disable') {
$(this).css('background-color', '#ff9900');
}
});
});
Example html table and script on jsfiddle
https://jsfiddle.net/frams/daknayhn/3/

You can use css classes for each type and when you dynamically create the table rows you can just assign the respective class for each row
.connected
{
background-color: #00e600
}
.err-disable
{
background-color: #ff9900
}
.disabled
{
background-color: #cc0000
}
.notconnect
{
background-color: #d5d5c3
}
<div id="outputDiv2">
<table border="1">
<tbody id="tableD">
<tr>
<td nowrap="">Port</td>
<td nowrap="">Name</td>
<td nowrap="">Status</td>
<td nowrap="">Vlan</td>
<td nowrap="">Duplex</td>
<td nowrap="">Speed </td>
<td nowrap="">Type
</td>
</tr>
<tr>
<td nowrap="">Fa0/1</td>
<td nowrap=""></td>
<td nowrap="" class="connected" >connected</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap="">10 </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/2</td>
<td nowrap=""></td>
<td nowrap="" class="connected">connected</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap="">10 </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/3</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="err-disable">err-disable</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="disabled">disabled</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
</tbody>
</table>
</div>

please try this code
$(function () {
$("#outputDiv2").delegate('click', "td", function () {
$('.notconnect').css('background-color', '#d5d5c3');
$('.connected').css('background-color', '#00e600');
$('.disabled').css('background-color', '#cc0000');
$('.err-disable').css('background-color', '#ff9900');
});
});

How to apply smooth show/hide effect with slideToggle on jQuery

I am trying to do show hide content with slideToggle and it is wokign but I am not getting smooth animation effect on my table.
I have tryied with this two code but now getting proper animation effect:
$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
Any idea how to do that?
Thanks.
Here is my jQuery code work:
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>

simply change this:
$('.more').stop().slideToggle(10);// to show effect faster use small value.
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(10);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>

The best is what you can do is make a table out of div's.

Like DevJoeri I would suggest you to use DIVs but if you don't want to or can't. Adding the folowing css rules helped on your example
tr {
float: left;
width: 100%;
}

please check this link
You cannot apply toggle animation to td,tr tag
it can be applied only on div tag

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.