我的网站上有一个表单，用户填写输入字段并从下拉菜单中选择。对于更多选项，提供了一个按钮，可以为用户动态生成更多字段。这很好。
现在，我正在尝试实现一种功能，可以在用户完成填写订单字段后立即预览用户订单（以表格格式），并且名称字段获得焦点，但我似乎无法完成它。任何帮助将不胜感激。
这是我到目前为止所尝试的内容：
<form class="form-horizontal" method="post" action="" id="order_form">
<fieldset class="orders_det">
<div class="form-group">
<label for="prod_type">Type</label>
<select name="prod_type[]" class="form-control prod">
<option value="">-- Select Products --</option>
<option value="prod1">Prod1</option>
<option value="prod2">Prod2</option>
<option value="prod3">Prod3</option>
</select>
</div>
<div class="form-group">
<label for="quant" >
<input type="text" class="form-control quant" name="quant[]">
</label>
<div>
<button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
</div>
</fieldset>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control name" name="name">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
</div>
</form>
<div class="orders_preview"></div>
我的jquery：
$("form input.name").on("focus", function(e){
var prod = $("form select[name='prod_type[]']").map(function(){
return $(this).val();
}).get();
var quant = $("form input[name='quant[]']").map(function(){
return ($(this).val());
}).get();
var table = '';
table = '<table>';
table = '<thead>';
table = '<tr>';
table = '<th>Product</th>';
table = '<th>Quantity</th>';
table = '</tr>';
table = '</thead>';
table = '<tbody>';
table = '<tr>';
table = '<td>'+prod+'</td>';
table = '<td>'+quant+'</td>';
table = '</tr>';
table = '</tbody>';
table = '</table>';
$(".orders_preview").append(table);
});
答案 0 :(得分：2)
您需要使用+=（将每个数据连接到变量），如下所示： -
table += '<table>';
table += '<thead>';...... so on for others
工作示例： -
$(document).ready(function() {
$('form button#more_btn').on("click", function(e) {//to generate dynamic fields
e.preventDefault();
var moreOrders = '';
moreOrders += '<div class="new_order">';
moreOrders += '<div class="form-group">';
moreOrders += '<label for="prod_type">Type</label>';
moreOrders += '<select name="prod_type[]" class="form-control prod">';
moreOrders += '<option value="">-- Select Products --</option>';
moreOrders += '<option value="prod1">Prod1</option>';
moreOrders += '<option value="prod2">Prod2</option>';
moreOrders += '<option value="prod3">Prod3</option>';
moreOrders += '</select>';
moreOrders += '</div> ';
moreOrders += '<div class="form-group">';
moreOrders += '<label for="quant" class="control-label col-md-2" >Quantity</label>';
moreOrders += '<div class="form-control col-md-6">';
moreOrders += '<input type="text" class="form-control quant" name="quant[]">';
moreOrders += '</div>';
moreOrders += '<div>';
moreOrders += '</div><br />';
$('.more_orders').append(moreOrders);
});
$("form input.name").on("focus", function(e) {//to generate a preview table
var prododuct = $("form select[name='prod_type[]']");
var quantity = $("form input[name='quant[]']");
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
table += '<tr>';
prododuct.each(function(i) {
table += '<tr>';
table += '<td>' + $(this).val() + '</td>';
table += '<td>' + quantity.eq(i).val() + '</td>';
table += '</tr>';
})
table += '</tr>';
table += '</tbody>';
table += '</table>';
$(".orders_preview").append(table);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="" id="order_form">
<fieldset class="orders_det">
<div class="form-group">
<label for="prod_type">Type</label>
<select name="prod_type[]" class="form-control prod">
<option value="">-- Select Products --</option>
<option value="prod1">Prod1</option>
<option value="prod2">Prod2</option>
<option value="prod3">Prod3</option>
</select>
</div>
<div class="form-group">
<label for="quant" class="control-label col-md-2" >Quantity</label>
<div class="form-control col-md-6">
<input type="text" class="form-control quant" name="quant[]">
</div>
<div>
<button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
</div>
</div>
<div class="more_orders">
</div>
</fieldset>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control name" name="name">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
</div>
</form>
<div class="orders_preview"></div>
jsFiddle工作链接： - https://jsfiddle.net/8jmz4w14/
答案 1 :(得分：2)
单独=不会连接，因此您需要使用+=来实现完整的表格：
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
table += '<tr>';
table += '<td>'+prod+'</td>';
table += '<td>'+quant+'</td>';
table += '</tr>';
table += '</tbody>';
table += '</table>';
答案 2 :(得分：2)
我会稍微修改你的jquery，将事件处理程序改为'on change'而不是'on focus'。此外，就在开始tr标签之前，我将遍历你的var prod值，就像这样;
$("form").on("change", function(e) { //to generate a preview table
var prod = $("form select[name='prod_type[]']")
var quant = $("form input[name='quant[]']")
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
prod.each(function(i) {
table += '<tr>';
table += '<td>' + $(this).val() + '</td>';
table += '<td>' + quant.eq(i).val() + '</td>';
table += '</tr>';
})
table += '</tbody>';
table += '</table>';
$(".orders_preview").html(table);
});