如何动态添加表格行并按行进行计算答案

【问题标题】：How to dynamically add table rows and perform calculation by row如何动态添加表格行并按行进行计算
【发布时间】：2025-11-24 00:40:02
【问题描述】：

我正在尝试添加以下行：

$("#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>

需要帮助！提前致谢

【问题讨论】：

我很想知道你为什么用$.each($("#tab_logic tr"), function() {而不是$("#tab_logic tr").each(function() {

标签： javascript jquery laravel row add

【解决方案1】：

在创建视图时，Laravel 使用 PHP 一次性处理模板（并将 {{ }} 中的内容替换为真实数据）。

您正在使用 javascript 在客户端生成刀片模板代码，因此 php 代码永远不会被执行。

您需要做的是对服务器进行 ajax 调用，以返回构建新表单字段所需的信息，并使用实际数据而不是刀片模板代码构建它们。

【讨论】：