可以在HTML页面编写元素，然后使用js动态生成，例如：

＜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单选按钮，需要绑定单击的事件，这部分代码获取选中的场地所预约的时间段，并将其显示到表格下方的框框中，为AJAX局部更新，改变选中的场地时（单选按钮的改变），也会在下面更新该场地的预约时间段：

function getRoomTimeSpan（） ｛
 var roomNumber ＝ getSelectedRadioValue（）；
 ／／发送请求获预约的时间段
 ＄．ajax（｛
     type： ＇get＇，
     url： ＇RoomBookHandler．ashx＇，
     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（＇获取数据失败！＇）；
     ｝
 ｝）；
｝

时间段的选择使用了一个时间选择控件，效果如下：

预定时，获取用户输入的一系列数据，然后使用AJAX发送到后台进行处理：

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；
   ｝
   ／／要发送的数据，教室号，预定开始时间－结束时间，我的备注
   ＄．ajax（｛
       type： ＇post＇，
       url： ＇RoomBookHandler．ashx＇，
       async： true，
       data： ｛
           action： ＇bookRoom＇，
           roomNo： roomNumber，
           bookTime： bookT，
           myRemark： myR
       ｝，
       success： function （result） ｛
           alert（result）；
           getRoomTimeSpan（）；
           updateBookedTable（）；
       ｝，
       error： function （） ｛
           alert（＇请求失败！＇）；
       ｝
   ｝）；
｝

注意，如果用户输入不合法，比如未选中时间段，未选中教室，时间段冲突等都无法有效完成预定。

预约成功显示预约的教室：

表格创建代码与场地显示的表格创建代码类似，取消预约的需要将取消的预定号（预定号绑定到了checkbox的value中）发送到后台，进行记录删除：

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（＂请选择您需要取消预约的教室！＂）；
       return false；
   ｝
   var cancelListStr ＝ checkList．join（＇，＇）； ／／转成1，3，4这种形式，后台再解析
   ＄．ajax（｛
       type： ＇post＇，
       url： ＇RoomBookHandler．ashx＇，
       async： true，
       data： ｛
           action： ＇cancelBook＇，
           cancel： cancelListStr
       ｝，
       success： function （result） ｛
           alert（result）；
           ／／刷新本表
           updateBookedTable（）；
           ／／刷新foot
           if （timeSpanUpList．indexOf（getSelectedRadioValue（）） ！＝ －1） ｛
               getRoomTimeSpan（）；
           ｝
       ｝，
       error： function （） ｛
           alert（＇连接失败！＇）；
       ｝
   ｝）；
｝

成功以后，更新该表格。但是需要注意的是，此外还做了一个小细节，取消某一时间段以后，如果恰好在场地展示页面选中的也是这个教室，那么下面的预约时间段也会同步更新，采用的同样为AJAX技术。

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

历史预约表格的生成，采用的是aspx中嵌入脚本的形式生成的：

＜table class＝＂primary＂  style＝＂width： 100％＂＞
   ＜tr＞
       ＜th＞教室号＜／th＞
       ＜th＞教室类型＜／th＞
       ＜th＞容纳人数＜／th＞
       ＜th＞我的备注＜／th＞
       ＜th＞日期＜／th＞
       ＜th＞开始时间＜／th＞
       ＜th＞结束时间＜／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＞

检索的时候，系统将自动从预订表中检索该用户在今天之前的预约信息，并展示出来。