1

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?

Improve this question
1
  • What about card suit? Your table only seems to address the 2-10 + j/q/k/a.
    – mrtsherman
    Commented Jan 21, 2012 at 18:08

3 Answers 3

Reset to default
2

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

Improve this answer
1

jQuery (within the $(document).ready() function, or after the table was created)

$('td').click(function(){
    var hand = $(this).attr('id');
});
Improve this answer
1

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.

Improve this answer
1
  • "starting poker hand" --> 52 possible combinations not
    – Giorgio
    Commented Jan 22, 2012 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.