将座位号添加到图像ajax、JavaScript中

Adding seat numbers to the images ajax, JavaScript

本文关键字：ajax JavaScript 图像 添加      更新时间：2023-09-26

我正在做一些事情，比如座位预订页面和座位号，A1，A2。。。G1。。。G17、G18应在页面加载时动态添加到图像标记中，并在鼠标悬停在它们上方时显示为工具提示。

这是我的功能，但它不起作用：

function allocateSeats(){
var table = $("#seats");
var num = 0;
var rowName;    
table.each(function(){
    $(this).find('img').each(function(){
        var col = $(this).parent().children().index($(this));
        var row = $(this).parent().parent().children().index($(this).parent());
        num ++;
        switch(true){
        case(num<7):
            rowName='A';
        break;
        case(num>6 && num<13):
            rowName='B';
        break;
        case(num>12 && num<19):
            rowName='C';
        break;
        case(num>18 && num<37):
            rowName='D';
        break;
        case(num>36 && num<55):
            rowName='E';
        break;
        case(num>54 && num<73):
            rowName='F';
        break;
        case(num>72 && num<91):
            rowName='G';
        break;
        }
        //alert("Column: " + col + ", Row: " + row); -----This should work
        $(this).attr('id',rowName + row);
        $(this).attr('title',rowName + row);
        $(this).draggable({
            helper: 'clone',
            revert: 'invalid',
            cursor: 'move'
        });
        $("#topLeft").droppable({
            drop: handleDropEvent,
            out: handleDropOut
        });
    })
})
}

在创建图像元素时（可能使用php进行循环），是否有任何原因不添加座位行号、列号和标题属性？

我想在你的服务器端代码中，你可能有这样的东西*伪代码*

<?php 
$rowNames = array('A','B','C','D','E','F','G');
for ($row = 0; $row < 10; $row+ ) { 
    /* get new letter for the new row that will begin with for loop */
    $rowName = array_shift($rowNames);
    echo '<tr data-rowname="row_'.$rowName.'">';
    for ($col= 0; $col< 10; $col+ ) {
        echo '<td ><img src="http://placehold.it/10x10" id="seat_"'.$row.'_'.$col.'></td>';
    }
    echo "</tr>"
}
?>

我假设您没有将seats.html页面保存为静态html，并且很可能是使用嵌套的for循环生成的。如果是这样的话，您还可以在生成页面时创建行、列的数字和字母。

使用新解决方案编辑。

Js出价http://jsfiddle.net/rainerpl/j2k0n5ra/5/

and code
<table id="seats">
    <tr>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
    </tr>
    <tr>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
    </tr>
    <tr>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
        <td><img src="http://placehold.it/10x10"/></td>
    </tr>
</table>
var table = $("#seats");
var rows  = $("tr");
var seats,seat;
var rowNr, seatNr;
var rowLabels = ["A","B","C","D","E","F","G"];
var rowLabel;
for (rowNr = 0; rowNr < rows.length; rowNr++) {
      var seats  = $(rows.get(rowNr)).find("td");
    rowLabel = rowLabels.shift();
   for (seatNr = 0; seatNr < seats.length; seatNr++) {
     seat = $(seats.get(seatNr)).find("img");
       seat.get(0).title = rowLabel + seatNr;
       seat.get(0).id = rowLabel + seatNr;
       seat.after("<div class='label'>"+rowLabel + seatNr+"</div>");
   }  
}
table tr td img {width: 48px; height: 48px;}
table tr td {position: relative;}
.label {
    position: absolute;
    right: 2px;
    bottom: 4px;
    font-weight: bold;
    font-size: 10px;
}
相关文章：