테이블에 행을 추가 jquery

Question

jQuery를 사용하여 행을 추가하려고합니다. 그러나 행은 추가되지 않습니다.

<table id="edu_table"> 
     <tr> 
      <td class="label">Course Name </td> 
      <td id="paddingtab" /> 
      <td class="label">Institution Name </td> 
      <td id="paddingtab" /> 
      <td class="label">Start Date </td> 
      <td id="paddingtab" /> 
      <td class="label">End Date </td> 
      <td id="paddingtab" /> 
      <td class="label">Percentage or CGPA </td> 

     </tr> 
</table> 

내가 버튼 클릭 테이블에 행을 추가하려고 해요 : 여기

<script type="text/javascript"> 

    var counter = 1; 
    $(function(){ 
     $('input#add_edu').click(function(){ 
     counter += 1; 
     alert(counter); 
     var paddingRow = "<tr id=\"padding-row\"><td id=\"padding-tab\"> </td> <td id=\"padding\"> </td><td id=\"padding-tab\"> </td><tr></tr>"; 

     var newRowLabel = "<tr><td class=\"label\">Course Name </td><td id=\"paddingtab\"></td><td class=\"label\">Institution Name</td><td id=\"paddingtab\"< </td><td class=\"label\">Start Date </td><td id=\"paddingtab\"< </td><td class=\"label\">End Date </td><td id=\"paddingtab\"></td><td class=\"label\">Percentage or CGPA </td></tr>"; 

     var newRowField = '<tr><td><input type="text" name="course_name_'+ count +'" id="course_name_'+ count +'" value=""></input></td><td></td><td><input type="text" name="college_name_'+ count +'" id="college_name_'+ count +'" value=""></input></td><td></td><td><input type="text" name="start_dt_'+ count +'" id="start_dt_'+ count +'" value=""></input></td><td></td><td><input type="text" name="end_dt_'+ count +'" id="end_dt_'+ count +'" value=""></input></td><td></td><td><input type="text" name="cgpa_'+ count +'" id="cgpa_'+ count +'" value=""></input></td></tr>'; 


     $('#edu_table').append(paddingRow); 
     $('#edu_table').append(newRowLabel); 
     $('#edu_table').append(newRowField); 

     }); 
     }); 
</script> 

는 HTML 코드입니다. 그러나 행은 추가되지 않습니다. newRowField 변수를 추가 할 때까지 행이 잘 추가되었습니다.

$('#edu_table').append(newRowField); 

Answer 1

귀하의 문자열은 value=""가지 경우 모두 이스케이프 따옴표가있다. 당신은 문자열을 작은 따옴표를 사용하여 자신에게 많은 문제를 저장할 수 있으며, 내부의 HTML에 대한 따옴표 :

var newRowField = '<tr><td><input type="text" name="course_name_' + count + '" id="course_name_' + count + '" value=""></td>' + 
    '<td></td><td><input type="text" name="college_name_' + count + '" id="college_name_' + count + '" value=""></td>' + 
    '<td></td><td><input type="text" name="start_dt_' + count + '" id="start_dt_' + count + '" value=""></td>' + 
    '<td></td><td><input type="text" name="end_dt_' + count + '" id="end_dt_' + count + '" value=""></td>' + 
    '<td></td><td><input type="text" name="cgpa_' + count + '" id="cgpa_' + count + '" value=""></td></tr>';