jquery动态添加table和行jquery
演示效果：
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h...
演示效果：
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function CreateTable(rowCount, cellCount) {
var table = $("<table border='1px'>");
table.appendTo($('#createtable'));
for (var i = 0; i < rowCount; i++) {
var tr = $("<tr></tr>");
tr.appendTo(table);
for (var j = 0; j < cellCount; j++) {
var td = $("<td>" + i * j + "</td>");
td.appendTo(tr);
}
}
tr.appendTo(table);
$('#createtable').append(table);
}
function CreateRow() {
var $table = $('#table1');
var tr = "<tr><td>1</td><td>2</td><td>3</td></tr>";
$table.append(tr);
}
</script>
</head>
<body>
<input type="button" value="添加表格" onclick="CreateTable(5,6)" />
<input type="button" value="添加行" onclick="CreateRow()" />
<div id="createtable"></div>
<div id="createrow">
<table id="table1" border="1" >
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</body>
</html>
下一篇：jquery小结
最新评论
热门推荐
我要评论