所选表格单元格文本显示在输入字段中

时间：2016-05-29 11:52:58

标签： javascript jquery html css

对于一个项目，我正在尝试开发一个在线票务系统，我想在表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>

2 个答案:

答案 0 :(得分：1)

选择每个highlighted课程，并将其值添加到span。喜欢这段代码

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

您可以在jsfiddle

中查看演示

答案 1 :(得分：1)

您可以使用map()获取所选单元格的文本 

$(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>

http://jsfiddle.net/34ueotjz/

相关问题
最新问题