HTML - javascript appending a row into a complex table

Question

this is my first question in here...

i have following code :

<form action="{jurl 'fraisreels~default:test'}" method="post">
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            {foreach $attribs as $a}
                <table class="table table-sm table-bordered border-dark" id="">
                    <thead>
                    <tr>
                        <th style="width:5%;" class="text-center align-middle"></th>
                        <th style="width:20%;" class="text-center align-middle">Type de dépense</th>
                        <th style="width:50%;" class="text-center align-middle">Libellé</th>
                        <th style="width:10%;" class="text-center align-middle">€</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td colspan="2"
                            class="bg-primary bg-gradient fw-bold align-middle text-white">{$a[0]->ue_bloc} {$a[0]->ori_lib_court}</td>
                        <td class="bg-primary bg-gradient fw-bold text-center align-middle" colspan="2"><a href=""
                                                                                                           class="btn btn-warning btn-block"><i
                                        class="fa-solid fa-magnifying-glass"></i> Voir l'ensemble des frais réels
                                introduits par rapport à cette formation</a></td>
                    </tr>
                    {assign $pp = 90000}
                    {foreach $a as $aa}
                        <tr>
                            <td class="text-center align-middle">
                                <button type="button" class="btn btn-success btn-ajouter" data-act=""><i
                                            class="fa-solid fa-plus"></i></button>
                            </td>
                            <td colspan="3" class="align-middle">{$aa->aa_lib}</td>
                        </tr>
                        <tr>
                            <td class="text-center align-middle">
                                <button type="button" class="btn btn-danger btn-supprimer"><i
                                            class="fa-solid fa-trash-can"></i></button>
                                <input type="hidden" class="activite js-aaid" name="aaid[{$lids}]" id="aaid[]"
                                       value="{$aa->aa_id}"/>
                            </td>
                            <td><select name="typefrais[{$lids}]" id="typefrais[]" class="form-select js-typefrais">
                                    <option value="N/C"></option>
                                    <option value="M">Matériel didactique</option>
                                    <option value="O">Ouvrages de référence</option>
                                    <option value="S">Séminaires, visites, voyages</option>
                                </select></td>
                            <td><input type="text" class="form-control js-libelle"
                                       placeholder="exemple: Livre ... (avec références) - voyage - blouse de labo"
                                       id="libelle[]" name="libelle[{$lids}]">
                            </td>
                            <td><input type="text" class="form-control js-prix" placeholder="Prix approximatif"
                                       id="prix[]" name="prix[{$lids}]"></td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            {/foreach}
        </div>
    </div>
</div>
<button type="submit">test</button>

I would like to append a line for each new entry that somebody would like to add. Basicly this table receives data from a controller.

I'd like to add this line everytime a user adds a new record :

<tr>
                            <td class="text-center align-middle">
                                <button type="button" class="btn btn-danger btn-supprimer"><i
                                            class="fa-solid fa-trash-can"></i></button>
                                <input type="hidden" class="activite js-aaid" name="aaid[{$lids}]" id="aaid[]"
                                       value="{$aa->aa_id}"/>
                            </td>
                            <td><select name="typefrais[{$lids}]" id="typefrais[]" class="form-select js-typefrais">
                                    <option value="N/C"></option>
                                    <option value="M">Matériel didactique</option>
                                    <option value="O">Ouvrages de référence</option>
                                    <option value="S">Séminaires, visites, voyages</option>
                                </select></td>
                            <td><input type="text" class="form-control js-libelle"
                                       placeholder="exemple: Livre ... (avec références) - voyage - blouse de labo"
                                       id="libelle[]" name="libelle[{$lids}]">
                            </td>
                            <td><input type="text" class="form-control js-prix" placeholder="Prix approximatif"
                                       id="prix[]" name="prix[{$lids}]"></td>
                        </tr>

And here you have a sample pic : what i want to do : what i want to do

what i except to obtain : result

Here you can find my current code: My code on gitlab

Thank you very much for all your help... if you need further detailed info i'd be glad to furnish it to you...

Answer 1

<html>
    <script>
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&nbsp;";

            for (var c=0, m=l; c < m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    </script>

    <body>
        <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
        <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
        <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
        <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

        <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
            <tr id='myRow'>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>