jQuery如何追加tr到table中？

jQuery 添加新内容有以下四个方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

下面实例演示：点击按钮则在表格数据区域增加一行

1、HTML结构

<table id = "test">

<thead>

<tr><th>列1</th><th>列2</th><th>列3</th></tr>

</thead>

<tbody>

<tr><td>1</td><td>1</td><td>2</td></tr>

<tr><td>2</td><td>4</td><td>5</td></tr>

</tbody>

</table>

<input type="button" id="btn1" value="在开头增加">

<input type="button" id="btn2" value="在末尾增加">

2、jquery代码

$(function(){

$("#btn1").click(function() {

$("#test tbody").prepend('<tr><td></td><td></td><td></td></tr>')

})

$("#btn2").click(function() {

$("#test tbody").append('<tr><td></td><td></td><td></td></tr>')

})

})

3、效果演示

获取tbody里面所有的td值我们可以通过获取tbody这个页面元素下面所有的tr元素，获取后通过遍历的方式来获取所有的td值。

以下面这个HTML代码为例来看一看怎么获取tbody里面所有的td值

HTML代码：

注意，一定要给tbody设置一个id，这样后面才能通过id获得tobody这个网页元素。

jquery代码如下：

这里使用一个list来获取了所有的tr，然后再遍历tr里面的td值。

<input type="submit" id="sub1" name="sub" value="提交" />这句中的type="submit"改为type="button"就可以了。

---