[英]How to dynamically add table rows and perform calculation by row
即时通讯试图添加行:
$("#add_row").click(function(){
$('#addr'+i).html("<td>{{ Form::select('sexo', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td><td><input type='text' name='color' id='color["+i+"]' placeholder='Color' class='form-control' style='min-width:100px;'/></td><td>{{ Form::select('razas', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td><td>{{ Form::select('tipos_ganados', ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td><td><input type='text' name='precioxkg' id='A["+i+"]' placeholder='$' class='calc form-control' style='min-width:100px;' /></td><td><input type='text' name='peso' id='B["+i+"]' placeholder='Kg' class='peso form-control' style='min-width:100px;'/></td><td><input type='text' name='monto' id='C["+i+"]' class='form-control total' placeholder='$' style='min-width:100px;' required readonly></td><td><button name='del0' class='btn btn-danger glyphicon glyphicon-remove row-remove'></button></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
对于删除按钮
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
这是我的默认表
<tr id='addr0'>
<td>{{ Form::select('sexo', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td>
<td><input type="text" name='color' id="color[1]" placeholder='Color' class="form-control" style="min-width:100px;"/></td>
<td>{{ Form::select('razas', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td>
<td>{{ Form::select('tipos_ganados', ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}</td>
<td><input type="text" name='precioxkg' id="A[1]" placeholder='$' class="calc form-control" style="min-width:100px;" /></td>
<td><input type="text" name='peso' id="B[1]" placeholder='Kg' class="peso form-control" style="min-width:100px;"/></td>
<td><input type="text" name="monto" id="C[1]" class="form-control total" placeholder="$" style="min-width:100px;" required readonly></td>
<td><button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button></td>
</tr>
<tr id='addr1'></tr>
但是我的add_row代码不起作用...
PD:我也应该乘以例如A [“ + i +”] * B [“ + i +”] = C [“ + i +”],使用此其他添加箭头代码,我可以添加行
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr"+newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
});
add_row按钮可与此按钮一起使用,但无法按行计算
默认表
<tr id='addr0' data-id="0">
<td data-name="sexo">
{{ Form::select('sexo0', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
</td>
<td data-name="color">
<input type="text" name='color' id="color[1]" placeholder='Color' class="form-control" style="min-width:100px;"/>
</td>
<td data-name="razas">
{{ Form::select('razas0', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
</td>
<td data-name="tipo">
{{ Form::select('tipos_ganados0', ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
</td>
<td data-name="precioxkg">
<input type="text" name='precioxkg' id="precioxkg[1]" placeholder='$' class="calc form-control" style="min-width:100px;" />
</td>
<td data-name="peso">
<input type="text" name='peso' id="peso[1]" placeholder='Kg' class="peso form-control" style="min-width:100px;"/>
</td>
<td data-name="monto">
<input type="text" name="monto" id="total[1]" class="form-control total" placeholder="$" style="min-width:100px;" required readonly>
</td>
<td data-name="del">
<button nam"del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
</td>
</tr>
需要帮忙! 提前致谢
创建视图时,Laravel一次使用PHP处理模板(并将{{}}中的内容替换为实际数据)。
您正在使用javascript在客户端生成刀片模板代码,因此php代码将永远不会执行。
您需要做的是对服务器进行ajax调用,以返回构建新表单字段所需的信息,并使用实际数据(而不是刀片模板代码)构建它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.