jQuery如何追加tr到table中 添加到头或者尾
2025-06-23 23:52
jQuery
SQL Server
Oracle
MySQL
PostgreSQL
NoSQL
大数据
其他数据库
Windows
Windows Server
Linux
macOS
嵌入式
APACHE
NGINX
redis
Docker
git
互联网
tomcat
Html/Css
JavaScript
jQuery
HTML5
Angular
React
Vue
小程序
架构设计
面向对象
设计模式
领域驱动设计
Android开发
iOS开发
Flutter
鸿蒙
其他手机开发
敏捷开发
项目与团队管理
软件工程其他
.NET
Java
Python
Go
PHP
C++
Ruby
Swift
C语言
Erlang
Delphi
Scala
R语言
Verilog
Dart
Rust
其他语言
asp
nodejs
读书区
翻译区
求职面试
计算机图形学
软件测试
菜谱
SEO技术
摄影
生活技巧
7
0
0
0
标题录入
封面图
在 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> <table id="myTable" border="1"> <tr> <td>原始行1</td> <td>原始行2</td> </tr> </table> <button onclick="appendRow()">追加到末尾</button> <button onclick="prependRow()">追加到开头</button> <script> function appendRow() { $('#myTable').append('<tr><td>新行1</td><td>新行2</td></tr>'); } 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 Raty星级评分插件使用方法
标题录入,一次不能超过6条
墨菲定律
T:0.005110s,M:154.91 KB
返回顶部
留言
留言
评论