javascript - 选定的表格单元格文本显示在输入字段中

Question

对于一个元素，我正在尝试开发一个在线票务系统，我想在其中读取表格中选定单元格的数据 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>

Answer 1

选择每个highlighted类并将它们的值添加到span。喜欢这段代码

var ticketValue = "";
$("#ticket-board td.highlighted").each(function(){
    ticketValue += $(this).text() + ",";
});
$(".selected-ticket").text(ticketValue);

您可以在jsfiddle中看到演示