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.
Related
I have the following table, I am wanting to add a class to the top 5 values in each row, only of the TD's with the class of 'championshipPoints'. After some searching and trial and error, I have managed to get the class added to the highest value, but I am struggling to get any further.
If the 6th and 7th values are the same I only want one of them highlighted.
I would like to try and solve on my own but could do with a pointer or 2 to start me off.
Thanks in advance.
HTML
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
JQ
$(document).ready(function(){
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function(){return parseFloat($(this).text());}).get();
$tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax,
0)).addClass('highestFive');
});
});
JSFiddle
Using sort() and slice()
$('tbody tr').each(function() {
$(this).find('.championshipPoints').sort(function(a, b) {
return b.innerText - a.innerText;
}).slice(0, 5).addClass('highestFive')
});
.highestFive {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
</table>
You were pretty close. I've made this js fiddle
$(document).ready(function() {
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function() {
return parseFloat($(this).text());
}).get();
values.sort((a, b) => a - b);
console.log(values);
const highlightAbove = values[values.length - 5];
$tds.each(function() {
var val = parseFloat($(this).text());
if (val >= highlightAbove) $(this).addClass('h')
})
});
});
I get the values, sort the values, get the 5th largest number, and then iterate over the tables and highlight the ones >= the 5th largest number by adding a class.
Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.
your help is much appreciated.
Here is my JSON format
{"nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
Here is what I am trying to achieve
table look
HTML
<table>
<tbody>
<tr class="odd">
<td rowspan="7">All</td>
<td rowspan="6">Incident Management</td>
<td rowspan="6">Global</td>
<td rowspan="2">Bangalore</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Frimley</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Palo Alto</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="1">Service Availability</td>
<td rowspan="1">Global</td>
<td rowspan="1">N/A</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
Though one.
var data = {"data":"Start","nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
function getNodeCount(obj){
var num = 0
if(obj.nodes){
for(var i=0;i<obj.nodes.length;i++){
num += getNodeCount(obj.nodes[i])
}
}else
num = 1
return num
}
function createRowHTML(data,html){
if(html==null) html = '<tr>'
html += '<td rowspan="'+getNodeCount(data)+'">'+data.data+'</td>'
if(data.nodes){
for(var i=0;i<data.nodes.length;i++){
if(i==0)
html += createRowHTML(data.nodes[i],'')
else
html += createRowHTML(data.nodes[i])
}
}else
html += '</tr>'
return html
}
var html = createRowHTML(data)
document.getElementById('result').innerHTML = '<table>'+html+'</table>'
table td{
border: solid 1px black;
}
<div id="result"></div>
There is a table with few rows, one of row has .active class, each cell of row has each class, in JQuery selecting table row with .active class, how can i get cell with specific class value/text ('.html()')
var curentRow = $("#selectProduct tr.active);
//how can i get from curentRow value/text of cell with class .prod_name?
<table id="selectProduct" class="productTable">
<tr>
<td>Nr</td>
<td>ID</td>
<td>Product</td>
<td>Buy Price</td>
<td>Precent</td>
<td>Sell Price</td>
<td>Provider</td>
</tr>
<tr>
<td class="">1</td>
<td class="prod_id">1</td>
<td class="prod_name">Product 1</td>
<td class="buy_price">100</td>
<td class="plus_percent">10</td>
<td class="sell_price">110</td>
<td class="provider_name">provider 1</td>
</tr>
<tr class="active">
<td class="">2</td>
<td class="prod_id">2</td>
<td class="prod_name">Product 2</td>
<td class="buy_price">1000</td>
<td class="plus_percent">10</td>
<td class="sell_price">1100</td>
<td class="provider_name">provider 2</td>
</tr>
<tr>
<td class="">3</td>
<td class="prod_id">3</td>
<td class="prod_name">Product 3</td>
<td class="buy_price">50</td>
<td class="plus_percent">20</td>
<td class="sell_price">60</td>
<td class="provider_name">provider 3</td>
</tr>
</table>
Use function find() to find the cell that you need in the row:
var curentRow = $("#selectProduct tr.active");
var yourCell = curentRow.find('.prod_id');
var value = yourCell.text();
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'
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.