Question

如何从波纹管表中输入输入字段而不是逗号分隔文本。

在我的波纹管代码中单击表格单元格时，它会将自己的文本字符串添加到输入字段A1,A2,A3,A4

但是我想输出每个字段作为输入字段和字段的值来自单击的表格单元格。实际上我想将每个字段值保存到数据库。这就是我需要输入字段的原因。

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

有人可以帮我修改我的代码吗？

我的表看起来像

Jsfiddle

$(function () {
  var isMouseDown = false,
    isHighlighted;
  $("#ticketLayout .select")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      ticketName();
	  calculate();
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    })

    .mouseover(function () {
      if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
        ticketName();
		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()
{
	var qty = document.getElementById("ticket-count").innerText;
	var value = document.getElementById("item-price").innerText;
	var result =  value * qty;
	
	$(".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>
						  <table cellpadding="0" cellspacing="0" id="ticketLayout">
							<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>
							 
</tbody>  
</table>
  
  					<form action="booking.php" method="post">
						  <div class="ticket-data">

  <div class="seats-container"></div>

								<p>Your Seat:<input id="tickets" name="ticket_no" type="text" class="selected-ticket" /></p>
								<p>Seat No: <span class="ticket-count" id="ticket-count" > </span></p>
								<p>Total Price: <input type="number" name="total-price" id="total-price" class="total-price" /></p>
								<button id="submit" type="submit" name="submit" class="btn btn-success">Continue</button>
							 </div>
					 </form>

Answer 1

因此，根据我的理解，您需要为每个突出显示的<td>创建新输入，而不是将文本附加到其他输入值。这可以通过将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>');
    });
}

此外，您需要更改html代码以将输入容器div放在<form>内，以便所有输入都将与表单数据一起提交..因此您必须将其附加到表单中：

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

单击表格单元格时如何创建输入字段

1 个答案: