Selected table cell text show in input field

Question

For a project I'm trying to develop a online ticketing system where I want to read the the Data from selected cell on a table Example .

FE: If someone select A1 seat Number the Ticket span should show the Number If selected multiple value the span show the selected multiple ticket number. Please visit my jsfiddle to see what I'm trying to achieve

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



  
    
      A1 A2 A3 A4
       B1 B2 B3 B4
       C1 C2 C3 C4
       D1 D2 D3 D4
       E1 E2 E3 E4
       F1 F2 F3 F4
       G1 G2 G3 G4
       H1 H2 H3 H4
       I1 I2 I3 I4
       J1 J2 J5 J3 J4
      
  

  
    

    Ticket:

Mohammad · Accepted Answer

Select every highlighted class and add value of them to span. Like this code

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

You can see demo in jsfiddle

Selected table cell text show in input field

Answers (2)

Related Questions