テーブルセルをクリックしたときに入力フィールドを作成する方法

Question

私のベローテーブルからコンマで区切られたテキストの代わりに入力フィールドを作成するにはどうしたらいいですか？私怒鳴るコードで

テーブルセルをクリックしたとき、それはA1,A2,A3,A4

のように入力フィールドに、独自のテキスト文字列を追加します。しかし、私はどこのテーブルセルからのフィールドの入力フィールドとして出力の各フィールドに値を希望クリックした実際には、各フィールド値をデータベースに保存したいと思います。だから私は入力フィールドが必要です。

<input type="text" class="some_class" value="text of the the cell" > 

コードを変更する手助けがありますか？

私のテーブルには、<td>を強調代わりに追加ので、私はあなたがそれぞれの新しい入力を作成する必要があり、あなたの質問から理解して何から

Jsfiddle

$(function() { 
 
    var isMouseDown = false, 
 
    isHighlighted; 
 
    $("#ticketLayout .select") 
 
    .mousedown(function() { 
 
     isMouseDown = true; 
 
     $(this).toggleClass("highlighted"); 
 
     ticketName(); 
 
\t calculate(); 
 
     isHighlighted = $(this).hasClass("highlighted"); 
 
     return false; // prevent text selection 
 
    }) 
 

 
    .mouseover(function() { 
 
     if (isMouseDown) { 
 
     $(this).toggleClass("highlighted", isHighlighted); 
 
     ticketName(); 
 
\t \t calculate(); 
 
     } 
 
    }); 
 

 
    $(document) 
 
    .mouseup(function() { 
 
     isMouseDown = false; 
 
    }); 
 
}); 
 
    
 
function ticketName(){ 
 
var count = $("#ticketLayout td.highlighted").length; 
 
$(".ticket-count").text(count); 
 

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

 
//Calculate Price 
 
function calculate() 
 
{ 
 
\t var qty = document.getElementById("ticket-count").innerText; 
 
\t var value = document.getElementById("item-price").innerText; 
 
\t var result = value * qty; 
 
\t 
 
\t $(".total-price").val(result); 
 
}

table .select { 
 
    width:40px; 
 
    height:40px; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    background-color:#fff; 
 
    border:1px solid #c0c0c0; 
 
} 
 
table .selected { 
 
    width:40px; 
 
    height:40px; 
 
    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/1.11.1/jquery.min.js"></script> 
 
<div class="ticket-panel"> 
 
    <p>Ticket Fare: <span id="item-price" class="item-price">450</span>Taka</p> 
 
\t \t \t \t \t \t <table cellpadding="0" cellspacing="0" id="ticketLayout"> 
 
\t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t <tr><td class="select">A1</td><td class="select">A2</td><td></td><td class="select">A3</td><td class="select">A4</td></tr> 
 
\t \t \t \t \t \t \t <tr> <td class="select">B1</td><td class="selected">B2</td><td></td><td class="select">B3</td><td class="select">B4</td></tr> 
 
\t \t \t \t \t \t \t 
 
</tbody> 
 
</table> 
 
    
 
    \t \t \t \t \t <form action="booking.php" method="post"> 
 
\t \t \t \t \t \t <div class="ticket-data"> 
 

 
    <div class="seats-container"></div> 
 

 
\t \t \t \t \t \t \t \t <p>Your Seat:<input id="tickets" name="ticket_no" type="text" class="selected-ticket" /></p> 
 
\t \t \t \t \t \t \t \t <p>Seat No: <span class="ticket-count" id="ticket-count" > </span></p> 
 
\t \t \t \t \t \t \t \t <p>Total Price: <input type="number" name="total-price" id="total-price" class="total-price" /></p> 
 
\t \t \t \t \t \t \t \t <button id="submit" type="submit" name="submit" class="btn btn-success">Continue</button> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t </form>

Answer 1

のように見えていますテキストを別の入力値に変換します。 これは、このようになりticketName()機能を変更することで行うことができます。

function ticketName(){ 
    var count = $("#ticketLayout td.highlighted").length; 
    $(".ticket-count").text(count); 
    $('.seats-container').html(''); 
    $("#ticketLayout td.highlighted").each(function(){ 
     $('.seats-container').append('<div>Seat : <input name="seats[]" type="text" class="some_class" value="'+$(this).text()+'" ></div>'); 
    }); 
} 

はまた、あなたはすべての入力フォームで送信されるように<form>内の入力コンテナのdivを置くために、あなたのhtmlコードを変更する必要がありますあなたはあなたのフォームにこれを追加する必要があります：

<div class="seats-container"></div>