javascript - 如何为表格制作表格单元格输入

标签 javascript html forms html-table

我必须以一种形式提交一个值,其中包含一手扑克牌的值(value)。

我想制作一张包含所有可能手牌的表格,以便用户可以从中选择一手牌。

这是我为创建表格而编写的代码:

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

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

最佳答案

类似于 this ?如果将 result 的类型更改为 hidden,则可以将卡片作为字符串提交。

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

关于javascript - 如何为表格制作表格单元格输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8954946/

相关文章:

javascript - 从 API 收到的值

c# - 如何在启动时将表单加载更改为其他表单?

javascript - js中可以获取到之前的历史状态对象吗?

asp.net - 当从相对定位更改为绝对定位时,阻止菜单变得凌乱

javascript - 如何向上遍历并搜索 html 标签并获取文本?

jquery - 调整一组 HTML 元素的大小

PHP $_POST vars 为空,Bootstrap 表单

Django:使 CustomUser 出现在 Auth 下的管理员中

javascript - nodejs 中的语法 babel

javascript - $filter 不是函数 AngularJS