如何通过jquery动态给表格添加一行
比如设置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);
});
});
这是我测试用的代码,你可以运行看看
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+等。
<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> 删除</td></tr>');
trtd.appendTo(tables);
});
</script>
乱七八糟的写了一大堆:
动态插入一行:
//在表格的末尾添加一行
$("#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
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);
});
});
这是我测试用的代码,你可以运行看看