我正在做一些事情,比如座位预订页面和座位号,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;
}