jQuery如何追加tr到table中添加到头或者尾

封面图 • 2025-09-23 • jQuery

在 jQuery 中，你可以使用 `.append()` 或 `.prepend()` 方法来向 `<table>` 中追加 `<tr>`（表格行）。下面是分别将 `<tr>` 添加到表格的**头部**或**尾部**的方法：

---

### ✅ 1. 向表格末尾（底部）添加 `<tr>`

```javascript
$('#yourTableId').append('<tr><td>新行1</td><td>新行2</td></tr>');
```

- `#yourTableId` 是你表格的 ID。
- `.append()` 会把内容添加到表格的**最后**。

---

### ✅ 2. 向表格开头（顶部）添加 `<tr>`

```javascript
$('#yourTableId').prepend('<tr><td>新行1</td><td>新行2</td></tr>');
```

- `.prepend()` 会把内容添加到表格的**最前面**。

---

### 示例：完整 HTML + jQuery

```html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Table Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button onclick="appendRow()">追加到末尾</button>
<button onclick="prependRow()">追加到开头</button>

function prependRow() {
    $('#myTable').prepend('<tr><td>新行1</td><td>新行2</td></tr>');
}
</script>

</body>
</html>
```

---

### ✅ 其他相关方法（可选）

- `.after()`：在某个元素**之后**插入内容。
- `.before()`：在某个元素**之前**插入内容。

例如：

```javascript
$('#someTr').after('<tr>新行</tr>');
```

---

如果你有更复杂的结构（比如 `<thead>`、`<tbody>`、`<tfoot>`），可以指定具体部分来添加：

```javascript
$('#myTable tbody').append('<tr>...</tr>');
```

---

如需动态生成 `<tr>` 内容，也可以用 JavaScript 对象或字符串拼接方式构建。需要我帮你生成一个带数据的示例吗？

jQuery如何追加tr到table中 添加到头或者尾

jQuery如何追加tr到table中添加到头或者尾