0
對於一個項目，我試圖開發一個在線票務系統，我想從表Example的選定單元格中讀取數據。在輸入字段中顯示選定的表格單元格文本
FE：如果有人選擇A1座位號碼，則票證範圍應顯示號碼如果選擇了多個值，則範圍將顯示選定的多個票證號碼。請訪問我jsfiddle，看看有什麼我想要實現
$(function() {
var isMouseDown = false,
isHighlighted,
tickets = [];
$("#ticket-board .select")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
selected();
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
selected();
}
});
$(document)
.mouseup(function() {
isMouseDown = false;
//alert('Deselected');
});
});
function selected() {
tickets = $("#ticket-board .select.highlighted").map(function(){
return $(this).text();
});
$('.selected-ticket').html(tickets.get().join());
}table .select {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:#fff;
border:1px solid #c0c0c0;
}
table .selected {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:red;
border:1px solid #c0c0c0;
}
table td.highlighted {
background-color:#60fc60;
}
.ticket-panel{
margin-top:30px;
margin-left:30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticket-panel">
<table cellpadding="0" cellspacing="0" id="ticket-board">
<tbody>
<tr><td class="select">A1</td><td class="select">A2</td><td></td><td class="select">A3</td><td class="select">A4</td></tr>
<tr> <td class="select">B1</td><td class="selected">B2</td><td></td><td class="select">B3</td><td class="select">B4</td></tr>
<tr> <td class="select">C1</td><td class="select">C2</td><td></td><td class="select">C3</td><td class="select">C4</td></tr>
<tr> <td class="select">D1</td><td class="select">D2</td><td></td><td class="select">D3</td><td class="select">D4</td></tr>
<tr> <td class="select">E1</td><td class="select">E2</td><td></td><td class="select">E3</td><td class="select">E4</td></tr>
<tr> <td class="select">F1</td><td class="select">F2</td><td></td><td class="select">F3</td><td class="select">F4</td></tr>
<tr> <td class="select">G1</td><td class="select">G2</td><td></td><td class="select">G3</td><td class="select">G4</td></tr>
<tr> <td class="select">H1</td><td class="select">H2</td><td></td><td class="select">H3</td><td class="select">H4</td></tr>
<tr> <td class="select">I1</td><td class="select">I2</td><td></td><td class="select">I3</td><td class="select">I4</td></tr>
<tr> <td class="select">J1</td><td class="select">J2</td><td class="select">J5</td><td class="select">J3</td><td class="select">J4</td></tr>
</tbody>
</table>
<div class="ticket-data">
<br>
<p>Ticket: <span class="selected-ticket"></span></p>
</div>
</div>
獲得所選單元格的文本如果你發現你的答案，標記其中一個來完成這個討論。 – Mohammad
是否有可能把它們放在輸入字段而不是 – Firefog
是的，請參閱http://jsfiddle.net/4Ltjqw0n/2/ – Mohammad