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

在表jQuery中添加一行

1 个答案: