How to dynamically add table rows and perform calculation by row

Question

im trying to add the rows with:

$("#add_row").click(function(){
  $('#addr'+i).html("{{ Form::select('sexo', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}{{ Form::select('razas', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}{{ Form::select('tipos_ganados',  ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados["+i+"]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}");
  $('#tab_logic').append('');
  i++; 
});

For remove button

 $(tr).find("td button.row-remove").on("click", function() {
         $(this).closest("tr").remove();
  });

This is my default table


                    {{ Form::select('sexo', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
                    
                    {{ Form::select('razas', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
                    {{ Form::select('tipos_ganados',  ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}

But my add_row code isn't working ...

PD: Also i should Multiply for example A["+i+"] * B["+i+"] = C["+i+"] , With this other add arrow code i can add rows

        $("#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 = $("", {
        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 = $("", {
                "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 = $("", {
                '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();
    });
});

});

The add_row button works with this one but cant calculate by row

The default table for this


                    
                        {{ Form::select('sexo0', ['' => '', '0' => 'Macho', '1' => 'Hembra'],Input::old('sexo'), array('id' => 'sexo[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
                    
                    
                        
                    
                    
                         {{ Form::select('razas0', ['' => ''] + $razas , Input::old('razas'), array('id' => 'razas[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}
                    
                    
                        {{ Form::select('tipos_ganados0',  ['' => ''] + $tipos_ganados , Input::old('tipos_ganados'), array('id' => 'tipos_ganados[1]', 'class' => 'form-control', 'style' => 'min-width:100px;')) }}

Need help! Thanks in advance

Laravelian · Accepted Answer

Laravel uses PHP to process the template (and replace the content within {{ }} with real data) a single time, when the view is created.

You're generating blade template code on the client side with javascript, and so the php code never gets executed.

What you'd need to do is make an ajax call to the server to return the information you need to build your new form fields, and build them with actual data, not blade template code.

How to dynamically add table rows and perform calculation by row

Answers (1)

Related Questions