![](/img/trans.png)
[英]Delete a row from a dynamically created table populated from a db and the item from the database
[英]Dynamically Generate Form Row With Select Populated From Database
这是我的困境。 在Laravel中,我将inspections
传递给视图,如下所示:
$inspections = Inspection::where("status", "!=", "started")->get();
return View::make('process')->with("inspections", $inspections);
检验包含已通过启动阶段的所有检验的列表。 在视图中,我正在创建一个表单来处理这些检查,如下所示:
<tr id="row_0" data-row="0">
<td>
<select class="form-control input-sm" name="inspection[0]">
<option value=""></option>
@foreach($inspections AS $inspection)
<option value="{{ $inspection->id }}">{{ $inspection->submission_number }} - {{ $inspection->policy_number }} - {{ $inspection->location_address }}</option>
@endforeach
</select>
</td>
<td><label class="radio-inline"><input type="radio" name="received[0]" value="yes" >Yes</label><label class="radio-inline"><input type="radio" name="received[0]" value="no" >No</label></td>
<td><label class="radio-inline"><input id="i_on_0" type="radio" name="invoiced[0]" value="yes" onclick="toggleInvoice(this);" data-row="0"/>Yes</label><label class="radio-inline"><input id="i_off_0" type="radio" name="invoiced[0]" value="no" onclick="toggleInvoice(this);" data-row="0"/>No</label></td>
<input type="hidden" id="in_0" name="invoice_number[0]" disabled/>
<td><input type="text" id="ia_0" name="invoice_amount[0]" class="form-control input-sm" disabled/></td>
<td><label class="radio-inline"><input type="radio" id="p_on_0" name="paid[0]" value="yes" disabled/>Yes</label><label class="radio-inline"><input type="radio" id="p_off_0" name="paid[0]" value="no" disabled/>No</label></td>
</tr>
这将创建以下内容:
这很好,但我不知道如何在此表上追加另一行,并仍然显示每个option的值 。 现在,我有+按钮在Javascript中调用以下函数:
function appendProcessingRow(){
var current_row = $("#processing_table tr:last").attr("data-row");
var content = '<tr id="row_' + (parseInt(current_row) + 1) + '" data-row="' + (parseInt(current_row) + 1) + '"><td><input type="text" name="policy_number[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm"/></td><td><label class="radio-inline"><input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="yes">Yes</label><label class="radio-inline"><input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="no"> No</label></td><td><label class="radio-inline"><input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="yes" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/> Yes</label><label class="radio-inline"><input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="no" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/> No</label></td><input type="hidden" id="in_' + (parseInt(current_row) + 1) + '" name="invoice_number[' + (parseInt(current_row) + 1) + ']" disabled/>><td><input type="text" id="ia_' + (parseInt(current_row) + 1) + '" name="invoice_amount[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm" disabled/></td><td><label class="radio-inline"><input type="radio" id="p_on_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="yes" disabled/> Yes</label><label class="radio-inline"><input type="radio" id="p_off_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="no" disabled/> No</label></td></tr>';
$('#processing_table > tbody:last').append(content);
}
可以,但是创建一个<input>
标记而不是select选项。 请参阅以下内容:
我的问题是,我要如何在Javascript中创建相同的行布局,同时要记住选择是由Laravel中的@foreach
生成的? 尝试放置:
<select class="form-control input-sm" name="inspection[0]">
<option value=""></option>
@foreach($inspections AS $inspection)
<option value="{{ $inspection->id }}">{{ $inspection->submission_number }} - {{ $inspection->policy_number }} - {{ $inspection->location_address }}</option>
@endforeach
</select>
在Javascript内部, appendProcessingRow()
可以“工作”到一定程度,但其中的值不存在:
因此,任何帮助将不胜感激。 在此先感谢您,很长的帖子。
如果不使用“完全ajax”从服务器获取选项,我认为克隆现有行是最简单的方法。
function appendProcessingRow(){
var lastRow = $("#processing_table tr:last");
var newRow = lastRow.clone();
var newId = parseInt(lastRow.data('row'))+1;
newRow.data('row', newId);
newRow.prop('id', newId);
newRow.find('select').prop('selectedIndex', 0);
// reset other inputs in a similar fashion
lastRow.after(newRow);
}
还有关于您输入的名称...您应该可以只保留它们,就像policy_number[]
不带索引。 它将自动将值放入数组(按它们在html中出现的顺序)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.