javascript - 如何在表格中动态添加2行

Question

我是 JS 和 jQuery 的初学者，当我单击链接(页面底部的灰色矩形)时，我想动态添加 2 行(橙色行和包含列的行) .

这是屏幕截图:

这是我的 HTML 代码:

<div class="ajout_prest">
    <p class="txt_ajout">
        <a class="AddResults" href="#">Ajouter une nouvelle prestation</a>
    </p>
    <p class="plus_ajout">
        <a class="AddResults" href="#">+</a>
    </p>
</div>

以及 JS 代码:

<script>
    $('.AddResults').click(function(){
        var rowNumber = 3;

        // All the cols
        var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
        var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
        var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
        var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
        var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
        var pttcVar = $('<td class="pttc_td"><strong>88 &#8364;</strong></td>') ;
        var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;      

        //Create 2 new rows
        var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
        var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + ');

        //Append the new row to the body of the #table_prest table
        $('#table_prest tbody').append(newTitreRow);
        $('#table_prest tbody').append(newContentRow);

        //Iterate row number
        rowNumber++;
    });
</script>

但是当然什么也没有发生。您对这个问题有什么想法吗？

谢谢:)

Answer 1

您的 JavaScript 代码中至少有一个错误:

var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + ');

连接末尾有一个额外的 + '

可能应该是:

var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + '</tr>');

编辑:

此外，我还应该提到，每次单击链接时，您使用的 rowNumber 变量都不会向上迭代，因为每次单击时它都会重置。为此，可以使用全局变量，或者如果您想使用行号更新标题行，则只需在每次单击按钮时获取表中的行数。