Question

I’m a beginner in JS and jQuery, and I want to add 2 rows dynamically (the orange one and the row which contains the cols) when I click on a link (the gray rectangle on the bottom of the page).

Here’s a screenshot :

This is my HTML code :

<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>

And the JS code :

<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>

But of course nothing happens. Do you have any idea about this problem?

Thank you 🙂

Answer 1

Your javascript code has at least one error in it:

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

at the end of the concatentation there is an extra + ‘

it should probalby be:

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

Edit:

Also I should mention that the rowNumber variable you are using won’t iterate upwards each time you click the link as it will reset each time you click. Either use a global variable for that, or just get the count of rows form the table each time the button is clicked instead if you want to update the Title line with the row number.