javascript - HTML/JQuery 自定义表单

Question

目前我在如下所示的页面上显示数据

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 等)。当选择其中一个时，它应该改变颜色。用户应该能够根据需要选择任意数量的座位/可用性。表格的其他部分不应该是可选的，只有座位〜可用性。

实现这样的目标的最佳方法是什么？我最初打算使用诸如复选框之类的东西，但这会改变我的外观和感觉，而我不想这样做。

任何建议表示赞赏。

谢谢

Answer 1

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

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