如何为表单创建表格单元格输入

时间:2012-01-21 17:16:17

标签: javascript html forms html-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>

我想让用户通过点击选择他的手,然后在表单中提交值。我怎样才能做到这一点?

3 个答案:

答案 0 :(得分:2)

this之类的东西?如果您将result的类型更改为隐藏,则可以将该卡提交为字符串。

要选择表格单元格,您必须为其附加一个事件监听器,并跟踪已选择的内容(或再次取消选择)。

答案 1 :(得分:1)

jQuery(在$(document).ready()函数内,或在创建表之后)

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

答案 2 :(得分:1)

The number of possible poker hands是2,598,960,因此您不想创建它们的表格。而是创建一组52个项目,每个项目由一个复选框和相关标签组成,用于标识卡片。添加JavaScript代码以检查提交表单时是否已选择了5个框。