如何通过jquery动态给表格添加一行

 我来答
汪汪汪汪汪876
2018-03-30 · TA获得超过2万个赞
知道小有建树答主
回答量:151
采纳率:94%
帮助的人:3万
展开全部
  1. 比如设置table的id为tab

  2. var trHTML = "<tr><td>...</td></tr>"

  3. $("#tab").append(trHTML);//在table最后面添加一行

  4. $("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类的点击事件添加,只要把上面的两行代码放进去就ok,注意,要把var trHTML那行代码放进添加事件里面,不然不管点击多少下,都只能添加一行

  5. $(function() {

  6. $(":button").click(function() {

  7. var tr = "<tr><td>new</td></tr>";

  8. //$("table").append(tr);

  9. $("table tr:eq(2)").after(tr);

  10. });

  11. });

这是我测试用的代码,你可以运行看看

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为:入口模块、底层支持模块和功能模块。其核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

闇之潘多拉
推荐于2017-12-16 · 超过24用户采纳过TA的回答
知道答主
回答量:52
采纳率:0%
帮助的人:35.6万
展开全部
<button name='my_submit'>添加一行</button>
<table name='tables'>
<tr><th>标题</th><th>发表人</th><th>内容简介</th><th>操作</th></tr>
</table>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
var myclick = $('button[name=my_submit]');
var tables = $('table[name=tables]');
myclick.click(function(){
var trtd = $('<tr><td>每天只睡四个小时的诀窍</td><td>再一次起床</td><td>保持五个月每天只睡四个小时的话...</td><td>&nbsp;删除</td></tr>');
trtd.appendTo(tables);

});
</script>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
丁巴什罗大神cy
2018-06-23 · TA获得超过1784个赞
知道小有建树答主
回答量:1525
采纳率:86%
帮助的人:633万
展开全部

乱七八糟的写了一大堆:

动态插入一行:

//在表格的末尾添加一行   
$("#table").append('<tr><td>new</td><td>new</td></tr>');    
//在表格的开头添加一行    
$("#table").prepend('<tr><td>new</td><td>new</td></tr>'); 
//在表格的第二行后面插入一行  
$("#table tr").eq(1).after('<tr><td>new</td><td>new</td></tr>');

动态插入一列:

//在表格的末尾添加一列   
$("#table tr").append('<td>newTD</td>');   
//在表格的开头添加一列   
$("#table tr").prepend('<td>newTD</td>');   
//在表格的第二列后添加一列   
$("#table tr td:nth-child(2)").after('<td>newTD</td>');

和jquery里对表格的一些常用操作,可以看这里:http://www.aijquery.cn/Html/jqueryjiqiao/95.html

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
东独餐晗丫1w
2016-08-05 · TA获得超过518个赞
知道小有建树答主
回答量:392
采纳率:92%
帮助的人:248万
展开全部
比如设置table的id为tab
var trHTML = "<tr><td>...</td></tr>"
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行
这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类的点击事件添加,只要把上面的两行代码放进去就ok,注意,要把var trHTML那行代码放进添加事件里面,不然不管点击多少下,都只能添加一行
$(function() {
$(":button").click(function() {
var tr = "<tr><td>new</td></tr>";
//$("table").append(tr);
$("table tr:eq(2)").after(tr);
});
});
这是我测试用的代码,你可以运行看看
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式