How to add 2 rows dynamically in a table
<p>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).</p>

<p>Here's a screenshot :</p>

<p><img src="http://i.stack.imgur.com/o8VsY.jpg" alt="enter image description here">
This is my HTML code :</p>

<pre><code>&lt;div class="ajout_prest"&gt;
    &lt;p class="txt_ajout"&gt;
        &lt;a class="AddResults" href="#"&gt;Ajouter une nouvelle prestation&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class="plus_ajout"&gt;
        &lt;a class="AddResults" href="#"&gt;+&lt;/a&gt;
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>And the JS code :</p>

<pre><code>&lt;script&gt;
    $('.AddResults').click(function(){
        var rowNumber = 3;

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

        //Create 2 new rows
        var newTitreRow = $('&lt;tr&gt;&lt;td class="bar_td" colspan=7&gt;&lt;strong&gt;PRESTATION ' + rowNumber + '&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;') ;
        var newContentRow = $('&lt;tr&gt;' + 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++;
    });
&lt;/script&gt;
</code></pre>

<p>But of course nothing happens. Do you have any idea about this problem?</p>

<p>Thank you :)</p>
