HTML/JQuery的自定义窗体

在我的网页看起来像下面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

的方式I输出此刻的数据是像这样（我用嫩枝和一个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等）可供选择。当选择一个时，它应该改变颜色。用户应该能够根据自己的需要选择尽可能多的座位/可用性。表格的其他部分不应选择，仅限于座位〜可用性。

什么是最好的方式来实现这样的事情？我最初会使用类似复选框的东西，但这会改变我的外观和感觉，我不想这样做。

任何意见赞赏。

感谢

来源

2015-03-13 Nick Price

您是否对任何JavaScript库有任何经验？为了动态地改变已经加载页面上元素的外观，你需要JavaScript。我推荐的一个流行JavaScript库是JQuery。 – davetw12 2015-03-13 18:14:16

需要查看实际页面源以确定每个“seat_ availability”节点的显示方式。 – DevlshOne 2015-03-13 18:14:23

这只是告诉你一个想法，代码是不完整的，请将其更改为您的需要。

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

来源

2015-03-13 18:21:13 aahhaa

HTML/JQuery的自定义窗体

回答

相关问题