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的自定義窗體

回答

相關問題