jquery 写表格

张千苒 3周前 10浏览 0评论

JQuery 是一种非常方便的 JavaScript 库,它可以轻松地创建表格,并且可以让网页变得十分动态。我们现在来看看如何使用 JQuery 来写表格吧!

<table id="mytable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>22</td>
      <td>广州市</td>
    </tr>
  </tbody>
</table>

以上就是一个简单的表格。现在我们使用 JQuery 来给这个表格添加行。

$("#mytable tbody").append("<tr><td>陈六</td><td>男</td><td>24</td><td>深圳市</td></tr>");

我们可以看到,上面的代码会在表格的 tbody 中添加一行数据。同样的,我们也可以使用 JQuery 来给表格添加列。

$("#mytable thead tr").append("<th>职业</th>");
$("#mytable tbody tr").each(function() {
  $(this).append("<td>教师</td>");
});

在上面的代码中,我们给表头添加了一个“职业”列,同时也在表体的每一行中添加了一个“教师”列。

以上就是使用 JQuery 来写表格的基本操作。JQuery 拥有非常强大的功能,能够让我们轻松地对表格、文本框等等组件进行操作,让我们的网页变得更加互动和生动。

上一篇 python3 pam