点击按钮添加表格行的jQuery函数失效问题求助

嘿，我帮你瞅了瞅代码，问题其实很明显——你的jQuery代码里犯了个小语法错误，咱们马上就能搞定！

问题所在 #

你在$("tr:last").after()里写的HTML内容没有用引号包裹，JavaScript会把<tr>这类标签当成未定义的标识符，直接报错，自然没法正常执行添加行的功能。

修正后的代码 #

JavaScript部分

$(function() {
  $("button").click(function(){
    // 给HTML字符串加上单引号（双引号也可以）
    $("tr:last").after('<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>');
  });
});

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Добавть преподавателя</button>
<table>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

额外建议（可选） #

从规范的表格结构来说，最好把表格的行放到<tbody>标签里，这样后续操作也更清晰，比如：

<table>
  <tbody>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>

对应的JS代码可以改成：

$("tbody").append('<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>');

这种方式比找最后一行更直观，也能避免如果表格有<thead>时误操作表头的问题。

现在你再试试，点击按钮就能正常添加新行啦！

内容的提问来源于stack exchange，提问作者user9282758