可以在HTML頁(yè)面編寫(xiě)元素，然后使用js動(dòng)態(tài)生成，例如：

＜table class＝＂primary＂ id＝＂roomInfo＂ style＝＂width： 100％＂＞＜／table＞
document．getElementById（＂roomInfo＂）．innerHTML ＝ creatRoomTable（result）；

也可以直接在aspx文件中使用C＃的腳本進(jìn)行生成：

＜％
System．Data．DataSet ds2 ＝ MyDBUtils．DBHelper．ExecuteQuery（＂select BookInfo．ID， BookInfo．RoomNumber， RoomType， RoomPeople， MyRemark，BookSt， ＂ ＋
   ＂BookEt， BookDuration from BookInfo join RoomInfo on ＂ ＋
   ＂BookInfo．RoomNumber ＝ RoomInfo．RoomNumber where ＂ ＋
   ＂BookDate ＞ ＇＂ ＋ DateTime．Now．ToString（＂yyyy－MM－dd＂） ＋ ＂＇ and CustomerName＝＇＂ ＋ Request．Cookies［＂login＿name＂］．Value ＋ ＂＇＂）；
for （int i ＝ 0； i ＜ ds2．Tables［0］．Rows．Count； i＋＋）
｛
   Context．Response．Write（＂＜tr＞＂）；
   for （int j ＝ 1； j ＜ 8； j＋＋）
   ｛
       Context．Response．Write（＂＜td＞＂）；
       Context．Response．Write（ds2．Tables［0］．Rows［i］［j］．ToString（））；
       Context．Response．Write（＂＜／td＞＂）；
   ｝
   Context．Response．Write（＂＜td＞＂）；
   Context．Response．Write（＂＜label＞＜input type＝＇checkbox＇ name＝＇checkbokRoom＇ value＝＇＂ ＋ ds2．Tables［0］．Rows［i］［0］．ToString（）＋＂－＂＋ ds2．Tables［0］．Rows［i］［1］．ToString（） ＋ ＂＇ ／＞＜span class＝＇checkable＇＞退訂＜／span＞＜／label＞＂）；
   Context．Response．Write（＂＜／td＞＂）；
   Context．Response．Write（＂＜／tr＞＂）；
｝
％＞

表格中的radio單選按鈕，需要綁定單擊的事件，這部分代碼獲取選中的場(chǎng)地所預(yù)約的時(shí)間段，并將其顯示到表格下方的框框中，為AJAX局部更新，改變選中的場(chǎng)地時(shí)（單選按鈕的改變），也會(huì)在下面更新該場(chǎng)地的預(yù)約時(shí)間段：

function getRoomTimeSpan（） ｛
 var roomNumber ＝ getSelectedRadioValue（）；
 ／／發(fā)送請(qǐng)求獲預(yù)約的時(shí)間段
 ＄．a(chǎn)jax（｛
     type： ＇get＇，
     url： ＇RoomBookHandler．a(chǎn)shx＇，
     async： true，
     data： ｛
         action： ＇getBookTime＇，
         roomNo： roomNumber
     ｝，
     success： function （result） ｛
         var dataList ＝ JSON．parse（result）；
         var footerStr ＝ ＇＜footer id＝＂bookTimeSpan＂ ＞＇；
         for （var ind in dataList） ｛
             footerStr ＋＝ ＇＜span class＝＂label warning＂ ＞＇；
             footerStr ＋＝ dataList［ind］．BookSt．toString（）．trim（）．substring（0， 5）；
             footerStr ＋＝ ＇ － ＇；
             footerStr ＋＝ dataList［ind］．BookEt．toString（）．trim（）．substring（0， 5）；
             footerStr ＋＝ ＇＜／span ＞＇；
         ｝
         footerStr ＋＝ ＇＜／footer ＞＇；
         document．getElementById（＂bookTimeSpan＂）．innerHTML ＝ footerStr；
     ｝，
     error： function （） ｛
         alert（＇獲取數(shù)據(jù)失�。。В�；
     ｝
 ｝）；
｝

時(shí)間段的選擇使用了一個(gè)時(shí)間選擇控件，效果如下：

預(yù)定時(shí)，獲取用戶(hù)輸入的一系列數(shù)據(jù)，然后使用AJAX發(fā)送到后臺(tái)進(jìn)行處理：

function bookRoom（） ｛
   var bookT ＝ document．getElementById（＂timeArrange＂）．value；
   if （bookT ＝＝＝ ＂＂） ｛
       alert（＂必須選擇要借用的時(shí)間范圍�。ⅲ�；
       return false；
   ｝
   var myR ＝ document．getElementById（＂myRemarks＂）．value；
   var roomNumber ＝ getSelectedRadioValue（）；
   if （roomNumber ＝＝＝ ＂＂） ｛
       alert（＂必須選擇要借用的教室�。ⅲ�；
       return false；
   ｝
   ／／要發(fā)送的數(shù)據(jù)，教室號(hào)，預(yù)定開(kāi)始時(shí)間－結(jié)束時(shí)間，我的備注
   ＄．a(chǎn)jax（｛
       type： ＇post＇，
       url： ＇RoomBookHandler．a(chǎn)shx＇，
       async： true，
       data： ｛
           action： ＇bookRoom＇，
           roomNo： roomNumber，
           bookTime： bookT，
           myRemark： myR
       ｝，
       success： function （result） ｛
           alert（result）；
           getRoomTimeSpan（）；
           updateBookedTable（）；
       ｝，
       error： function （） ｛
           alert（＇請(qǐng)求失�。。В�；
       ｝
   ｝）；
｝

注意，如果用戶(hù)輸入不合法，比如未選中時(shí)間段，未選中教室，時(shí)間段沖突等都無(wú)法有效完成預(yù)定。

預(yù)約成功顯示預(yù)約的教室：

表格創(chuàng)建代碼與場(chǎng)地顯示的表格創(chuàng)建代碼類(lèi)似，取消預(yù)約的需要將取消的預(yù)定號(hào)（預(yù)定號(hào)綁定到了checkbox的value中）發(fā)送到后臺(tái)，進(jìn)行記錄刪除：

function cancelBook（） ｛
   var checkList ＝ ［］；
   var timeSpanUpList ＝ ［］；
   var checkbokContext ＝ document．getElementsByName（＂checkbokRoom＂）；
   for （i ＝ 0； i ＜ checkbokContext．length； ＋＋i） ｛
       if （checkbokContext［i］．checked） ｛
           var dataStr ＝ checkbokContext［i］．value．split（＇－＇）；
           checkList．push（dataStr［0］）；
           timeSpanUpList．push（dataStr［1］）；
       ｝
   ｝
   if （checkList．length ＝＝ 0） ｛
       alert（＂請(qǐng)選擇您需要取消預(yù)約的教室�。ⅲ�；
       return false；
   ｝
   var cancelListStr ＝ checkList．join（＇，＇）； ／／轉(zhuǎn)成1，3，4這種形式，后臺(tái)再解析
   ＄．a(chǎn)jax（｛
       type： ＇post＇，
       url： ＇RoomBookHandler．a(chǎn)shx＇，
       async： true，
       data： ｛
           action： ＇cancelBook＇，
           cancel： cancelListStr
       ｝，
       success： function （result） ｛
           alert（result）；
           ／／刷新本表
           updateBookedTable（）；
           ／／刷新foot
           if （timeSpanUpList．indexOf（getSelectedRadioValue（）） �。� －1） ｛
               getRoomTimeSpan（）；
           ｝
       ｝，
       error： function （） ｛
           alert（＇連接失�。。В�；
       ｝
   ｝）；
｝

成功以后，更新該表格。但是需要注意的是，此外還做了一個(gè)小細(xì)節(jié)，取消某一時(shí)間段以后，如果恰好在場(chǎng)地展示頁(yè)面選中的也是這個(gè)教室，那么下面的預(yù)約時(shí)間段也會(huì)同步更新，采用的同樣為AJAX技術(shù)。

success： function （result） ｛
   alert（result）；
   ／／刷新本表
   updateBookedTable（）；
   ／／刷新foot
   if （timeSpanUpList．indexOf（getSelectedRadioValue（）） �。� －1） ｛
       getRoomTimeSpan（）；
   ｝
｝，

歷史預(yù)約表格的生成，采用的是aspx中嵌入腳本的形式生成的：

＜table class＝＂primary＂  style＝＂width： 100％＂＞
   ＜tr＞
       ＜th＞教室號(hào)＜／th＞
       ＜th＞教室類(lèi)型＜／th＞
       ＜th＞容納人數(shù)＜／th＞
       ＜th＞我的備注＜／th＞
       ＜th＞日期＜／th＞
       ＜th＞開(kāi)始時(shí)間＜／th＞
       ＜th＞結(jié)束時(shí)間＜／th＞
       ＜th＞借用時(shí)長(zhǎng)（小時(shí)）＜／th＞
   ＜／tr＞
   ＜tbody＞
   ＜％
       System．Data．DataSet ds3 ＝ MyDBUtils．DBHelper．ExecuteQuery（＂select BookInfo．RoomNumber， RoomType， RoomPeople， MyRemark，BookDate，BookSt， ＂ ＋
           ＂BookEt， BookDuration from BookInfo join RoomInfo on ＂ ＋
           ＂BookInfo．RoomNumber ＝ RoomInfo．RoomNumber ＂ ＋
           ＂where BookDate ＜ ＇＂ ＋ DateTime．Now．AddDays（1）．ToString（＂yyyy－MM－dd＂） ＋＂＇ and CustomerName＝＇＂ ＋ Request．Cookies［＂login＿name＂］．Value ＋ ＂＇＂）；
       for （int i ＝ 0； i ＜ ds3．Tables［0］．Rows．Count； i＋＋）
       ｛
           Context．Response．Write（＂＜tr＞＂）；
           for （int j ＝ 0； j ＜ 8； j＋＋）
           ｛
               Context．Response．Write（＂＜td＞＂）；
               Context．Response．Write（ds3．Tables［0］．Rows［i］［j］．ToString（））；
               Context．Response．Write（＂＜／td＞＂）；
           ｝
           Context．Response．Write（＂＜／tr＞＂）；
       ｝
   ％＞
   ＜／tbody＞
＜／table＞

檢索的時(shí)候，系統(tǒng)將自動(dòng)從預(yù)訂表中檢索該用戶(hù)在今天之前的預(yù)約信息，并展示出來(lái)。