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

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

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

＜％
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單選按鈕，需要綁定單擊的事件，這部分代碼獲取選中的場地所預(yù)約的時間段，并將其顯示到表格下方的框框中，為AJAX局部更新，改變選中的場地時（單選按鈕的改變），也會在下面更新該場地的預(yù)約時間段：

function getRoomTimeSpan（） ｛
 var roomNumber ＝ getSelectedRadioValue（）；
 ／／發(fā)送請求獲預(yù)約的時間段
 ＄．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ù)失敗�。В�；
     ｝
 ｝）；
｝

時間段的選擇使用了一個時間選擇控件，效果如下：

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

function bookRoom（） ｛
   var bookT ＝ document．getElementById（＂timeArrange＂）．value；
   if （bookT ＝＝＝ ＂＂） ｛
       alert（＂必須選擇要借用的時間范圍！＂）；
       return false；
   ｝
   var myR ＝ document．getElementById（＂myRemarks＂）．value；
   var roomNumber ＝ getSelectedRadioValue（）；
   if （roomNumber ＝＝＝ ＂＂） ｛
       alert（＂必須選擇要借用的教室�。ⅲ�；
       return false；
   ｝
   ／／要發(fā)送的數(shù)據(jù)，教室號，預(yù)定開始時間－結(jié)束時間，我的備注
   ＄．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（＇請求失敗�。В�；
       ｝
   ｝）；
｝

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

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

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

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（＂請選擇您需要取消預(yù)約的教室�。ⅲ�；
       return false；
   ｝
   var cancelListStr ＝ checkList．join（＇，＇）； ／／轉(zhuǎn)成1，3，4這種形式，后臺再解析
   ＄．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（＇連接失�。。В�；
       ｝
   ｝）；
｝

成功以后，更新該表格。但是需要注意的是，此外還做了一個小細節(jié)，取消某一時間段以后，如果恰好在場地展示頁面選中的也是這個教室，那么下面的預(yù)約時間段也會同步更新，采用的同樣為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＞教室號＜／th＞
       ＜th＞教室類型＜／th＞
       ＜th＞容納人數(shù)＜／th＞
       ＜th＞我的備注＜／th＞
       ＜th＞日期＜／th＞
       ＜th＞開始時間＜／th＞
       ＜th＞結(jié)束時間＜／th＞
       ＜th＞借用時長（小時）＜／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＞

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