如何在表中動態添加2行

Question

我是JS和jQuery的初學者，我想在點擊鏈接時動態地添加2行（橙色和包含cols的行）頁面底部的灰色矩形）。

以下是截圖：

這是我的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 + '); 

在concatentation的盡頭有一個額外的+'

應該probalby是：

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

編輯：

另外我應該提到，您使用的rowNumber變量不會每次單擊鏈接時向上迭代，因爲每次單擊時都會重置它。無論是使用全局變量還是全局變量，或者每次單擊按鈕時只獲取表格的行數，而不是使用行號更新標題行。

Answer 2

我認爲這個問題是您忘記下面

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

Answer 3

在該行最後一個單引號'有一些問題。

正如所指出的那樣，當連接行時，你錯過了一個關閉'。

但是，你也試圖連接jQuery對象而不是字符串。你根本不需要jQuery對象。

另外，變量連接之間不需要+ '' +。

var rowNumber = 3; 

$('.AddResults').click(function(){ 

    // Concatenate the cells into a single string 
    var cells = 
     '<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>' + 
     '<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>' + 
     '<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>' + 
     '<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>' + 
     '<td class="tt_td"><strong>4h.</strong></td>' + 
     '<td class="pttc_td"><strong>88 &#8364;</strong></td>' + 
     '<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>' + cells + '<tr>' 

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

    //Iterate row number 
    rowNumber++; 
});