Question

I have tried in jsfiddle 一个在网页上显示seatlayout的HTML代码。

我们将使用javascript在#place元素中添加席位。为了概括，使用settings对象：

rows：总座位数。

cols：每行中的座位总数。

rowCssPrefix：将用于使用（rowCssPrefix + row number）css类自定义行布局。

colCssPrefix：将用于使用（colCssPrefix +列号）css类自定义列。

seatWidth：座位宽度。

seatHeight：座位高度。

seatCss：css座位。

selectedSeatCss：已预订座位的css类。

selectingSeatCss：css选定席位类。

init方法用于绘制座位布局。已经预订的座位数组将作为此方法的参数传递。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="javascript" type="text/javascript">


<script>

     var   settings = {
           rows: 5,
           cols: 15,
           rowCssPrefix: 'row-',
           colCssPrefix: 'col-',
           seatWidth: 35,
           seatHeight: 35,
           seatCss: 'seat',
           selectedSeatCss: 'selectedSeat',
           selectingSeatCss: 'selectingSeat'
       };
<!--rows: total number of rows of seats.
    cols: total number of seats in each row.
    rowCssPrefix: will be used to customize row layout using(rowCssPrefix + row number) css class.
 colCssPrefix: will be used to customize column using (colCssPrefix + column number) css class.
    seatWidth: width of seat.
    seatHeight: height of seat.
    seatCss: css class of seat.
    selectedSeatCss: css class of already booked seats.
    selectingSeatCss: css class of selected seats.->
  <!-- init method is used to draw seats layout. Already booked seats array will be passed as argument of this method.->
    var init=function(reservedSeat) {

            var str = [], seatNo, className;
              for (i = 0; i < 5; i++) {

                 for (j = 0; j < 5; j++) {

                    seatNo = (i + j * settings.rows + 1);                                              
                    className = settings.seatCss + ' ' +    settings.rowCssPrefix + i.toString()    + ' ' + settings.colCssPrefix +   j.toString();                             if ($.isArray(reservedSeat) &&  $.inArray(seatNo, reservedSeat) != -1) {
              className += ' ' + settings.selectedSeatCss;
                    }
                    str.push('<li id="' + className + '"' +
                              'style="top:' + (i *   settings.seatHeight).toString() + 'px;left:' + (j *   settings.seatWidth).toString() + 'px">' +
                              '<a title="' + seatNo + '">' + seatNo +   '</a>' +
                              '</li>');
                }
              }
            $('#place').html(str.join(''));
        }; 
        //case I: Show from starting
        //init();

        //Case II: If already booked

        var bookedSeats = [5, 10, 25];

        init(bookedSeats);

</script>
<!--  we need to add style -->
<style>
#holder{    
height:200px;    
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;   
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;   
}    
#place li:hover
{
background-color:yellow;      
} 
#place seat{
background-color: blue;
background:url("seat.gif") no-repeat scroll 0 0 transparent;*/
height:33px;
width:33px;
display:block;   
}
#place.selectedSeat
{ 

background-image:url("seat.gif");          
}
#place.selectingSeat
{ 
background-image:url("seat.gif");        
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;    
list -style: none outside none;
padding-left:35px;
height:35px;
float:left;
}
</style>
</head>

<body>
<h2> Choose seats by clicking the corresponding seat in the layout        below:</h2>
<div id="holder"> 
    <ul  id="place">
    </ul>    
 <!-- We will add seats in “#place” element using javascript.-->
 </div>
 <div style="float:left;"> 
 <ul id="seatDescription">
    <li style="background:url('seat.gif') no-repeat scroll 0 0  transparent;">Available Seat</li>
    <li style="background:url('seat.gif') no-repeat scroll 0 0  transparent;">Booked Seat</li>
     <li style="background:url('seat.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
   </ul>
   </div>
     <div style="clear:both;width:100%">
     <input type="button" id="btnShowNew" value="Show Selected Seats" />       <input type="button" id="btnShow" value="Show All" />  
     <input type="button" id="b1" value="Seatlayout"/>         
    </div>
   </body>
  </html>

根据js中的代码无法获得所需的输出

0 个答案: