Выбранное текстовое поле ячейки таблицы в поле ввода

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

Answer 2

Вы можете получить тексты выбранной ячейки с помощью 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/