<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script>
$(function(){
for(i=1i<=10i++){
$("table >tbody").append("<tr><td>"+i+"</td><td>张三"+i+"</td></tr>")
}
})
</script>
</head>
<body>
<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
</table>
</body>
</html>
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>jQuery插入,复制、替换和删除节点</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
function onload(){
var $div1=$("<div style=\"background-color:990width:90pxheight:90px\" id='dateOfListParent'></div>")
$("#x").append($div1)
var $div=$("<div id='sijiDateOfList' style='height:90pxwidth:500pxmargin-left:50pxbackground-color:#39F'></div>")
$("#dateOfListParent").append($div)
var $table=$("<table border='1' id='sijitable' style='margin-left:50px'><tr><td>xcccccc</td></tr></table>")
$("#sijiDateOfList").append($table)
var $tr=$("<tr id='tr'></tr>")
$("#sijitable").append($tr)//问题这里吧
var $td=$("<td>list5</td>")
$("#tr").append($td)
}
</script>
</head>
<body onLoad="onload()">
<p id="x">你好！</p>
</body>
</html>
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、效果演示
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）