테이블에 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

자바 스크립트 코드는 적어도 하나의 오류가 있습니다

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

는 연결은의 끝이

이 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++; 
});