追加一行到表jQuery

Question

我正在尝试使用 jQuery 追加一行，但该行没有追加。

   <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 代码：

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

我试图通过单击按钮将行追加到表中，但行没有追加。在我附加变量 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>';