javascript - HTML/JQuery自定义表单

目前，我在类似于以下内容的页面上显示数据

AB123   |  LHRLAX  |  J9  I7  C9  D9  A6   |  -0655 0910
--------------------------------------------------------
CF1153  |  LHRLAX  |  I7  J7  Z9  T9  V7   |  -0910 1305
--------------------------------------------------------
WF133   |  LHRLAX  |  Y7  T7  J9  T9  C9   |  -1500 2206

目前，我输出数据的方式是这样的（我使用Twig和for循环，所以下面仅代表我的工作）

<table class="terminalAvailability">
    <tr>
        <td class="flightNumber">{{ info.flightNumber }}</td>
        <td class="details">{{ info.from ~ info.to }}</td>
        <td class="seatClass">{{ seat ~ availability  }}</td>
        <td class="otherInfo">{{ info.other }}</td>
    </tr>
</table>

现在，我不想更改此数据的外观，我几乎不希望它看起来像表格（我希望它看起来完全一样）。但是，我需要选择座位（J9，I7等）。选择一个时，它应该改变颜色。用户应该能够根据需要选择尽可能多的座位/空位。表格的其他部分不应选择，只能选择座位。

实现这样的目标的最佳方法是什么？我最初打算使用类似复选框的内容，但这会改变我不想做的外观。

任何建议表示赞赏。

谢谢

最佳答案

这只是告诉您一个想法，代码不完整，请根据需要进行更改。

<input type="hidden" value="" name="seatclass">

<table>
  ...
  ...
  <td data-seat="1"> seatclass 1</td><td data-seat="2"> seatclass 2</td><td data-seat="3"> seatclass 3</td>
  ...
</table>

JQUERY

$('td').click(
    function() {
        $(this).css() // style change
        $('input').val($(this).data('seat')); // put value to hidden form
        // then submit hidden form.
    }
)

关于javascript - HTML/JQuery自定义表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29039124/