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

我在做一些事情，比如座位预订页面和座位号，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 for循环）时，是否有任何理由不添加座椅行数、列数和标题属性

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

<?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循环生成的。如果是这样，您还可以在生成页面时创建行号、列号和字母

用新的解决方案编辑

JSFIDLE

---

Protip：任何相关属性都已与DOM对象关联。this.id和this.title比jQuery attr方法快得多。@Sterling Archer您能详细解释一下吗这已经提供了。使用$this返回DOM对象的jQuery对象，该对象就是这个$这个.attrid，rowName+row是这个.id=rowName+row的一个慢得多的操作。对于属性id、title、href、src等，jQuery是开销。什么不起作用，您是否得到了预期的警报？你能做一个JSFIDLE/类似的吗？有JS错误吗？@Sterling Archer没问题，但为什么我的函数不起作用，我的页面是静态html我正在使用jqery和ajax使其动态化我的任务是动态添加标题我可能做错了什么，但是你能告诉我为什么这个例子不能在fidle之外工作吗？我创建了空白页面，粘贴了你的代码进行测试，但我没能使它工作，有什么想法吗？感谢js fiddle中的代码使用JQuery，您的页面上有它吗？你能打开一个javascript控制台，看看是否有任何错误并粘贴到这里吗？最新版本，但这并不重要，因为我没有使用jQuery的任何高级功能。ps，你能把这空白页上传到我能看到的地方吗。

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;
}