如何使用javascript在html dom中打印数组值？ [关闭]

Question

我动态创建了一个巴士座位布局....

我已经选择了座位被推到阵列......

以及如何在html DOM中打印数组值.....

下面是我的HTML代码

<div>
            <h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
            <div id="holder"> 
                <ul  id="place">
                </ul>    
            </div>
            <div style=""> 
            <ul id="seatDescription">
                <li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
                <li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
                <li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
            </ul>
            </div>
            <div style="width:100%">
                <input type="button" id="btnShowNew" value="Show Selected Seats" />
                <input type="button" id="btnShow" value="Show All" />           
            </div>
        </div>

下面是我的CSS

#holder{    
height:225px;    
width:365px;
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:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;   
}
#place .selectedSeat
{ 
background-image:url("booked_seat_img.gif");          
}
#place .selectingSeat
{ 
background-image:url("selected_seat_img.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;
}

下面是我的js

    $(function () {
     var settings = {
        rows: 6,
        cols: 10,
        rowCssPrefix: 'row-',
        colCssPrefix: 'col-',
        seatWidth: 35,
        seatHeight: 35,
        seatCss: 'seat',
        selectedSeatCss: 'selectedSeat',
        selectingSeatCss: 'selectingSeat'
    };

    var init = function (reservedSeat) {
        var str = [], seatNo, className;
            for (i = 0; i < settings.rows; i++) {
                for (j = 0; j < settings.cols; 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 class="' + className + '"' +
                        'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                        '<a title="' + seatNo + '">' + seatNo + '</a>' +
                        '</li>');
                }
            }
        $('#place').html(str.join(''));    
        // Add already reserved seats
        localStorage.setItem('SeatNum', JSON.stringify(reservedSeat));
    };

    //case I: Show from starting
    //init();

    //Case II: If already booked
    var bookedSeats = [5, 10, 25];
    init(bookedSeats);

    $('.' + settings.seatCss).click(function () {        
        if ($(this).hasClass(settings.selectedSeatCss)){
            alert('This seat is already reserved');
        }
        else{
            $(this).toggleClass(settings.selectingSeatCss);

            var selectedSeat = JSON.parse(localStorage.getItem('SeatNum'));  
            if($(this).hasClass(settings.selectingSeatCss)){                
                // Add seat in local storage
                selectedSeat.push(parseInt($(this).find('a').text()));                                  
                localStorage.setItem('SeatNum', JSON.stringify(selectedSeat));
            }
            else{
                // Remove seat from local storage
                selectedSeat.splice(selectedSeat.indexOf(parseInt($(this).find('a').text())), 1);                
                localStorage.setItem('SeatNum', JSON.stringify(selectedSeat));              
            }
        }

        // Logging
        console.log('Reserved and selecting seats : ' + JSON.parse(localStorage.getItem('SeatNum')));
    });

    $('#btnShow').click(function myFunction() {
        var str = [];
        $.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
            str.push($(this).attr('title'));
        });
        alert(str.join(','));
    })

    $('#btnShowNew').click(function () {
        var str = [], item;
        $.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
            item = $(this).attr('title');                   
            str.push(item);                   
        });
        alert(str.join(','));
    })
});

如何在html DOM中打印数组值....

我发了警告..

我试过代码，但这不起作用..

我动态地创建了公交车座位布局我正在发出警报，以显示所选座位和所有座位但我想在html Dom中打印所选座位....

Answer 1

在你的HTML结尾拿一个div

然后将该行放在设置警报的位置$（'＃showSit'）。text（JSON.parse（localStorage.getItem（'SeatNum'）））;