<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn1" value="create table"/>
<table>
</table>
<script type="text/javascript">
var data = {
"百度": "http://www.baidu.com",
"饿了么": "http://www.baidu.com",
"阿里": "http://www.baidu.com",
};
$(function () {
//注册单击事件
$("#btn1").click(function () {
//创建一个table主动添加到body中
var tblObj = $('<table border="1"></table>').appendTo("body");
用each()方法进行循环遍历数据,创建tr,主动添加到table对象中
//$.each(data, function (key, val) {
// $('<tr><td>' + key + '</td><td><a href="' + val + '" target="_blank">'+key+'</a></td></tr>').appendTo(tblObj);
//});
//用map方法进行循环遍历数据,创建tr,主动添加到table对象中
$.map(data, function (val,key) {
$('<tr><td>' + key + '</td><td><a href="' + val + '" target="_blank">' + key + '</a></td></tr>').appendTo(tblObj);
});
});
});
</script>
</body>
</html>
使用JQuery动态创建表格
最新推荐文章于 2022-10-11 18:14:17 发布