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