$(function () {
var getjson = {
"百度": "http://www.baidu.com",
"新浪": "http://www.sina.com.cn",
"腾讯": "http://www.qq.com"
};
$(‘#btn‘).click(function () {
var tbobj = $(‘<table border="1"></table>‘).appendTo($(‘body‘));//appendTo表示添加到 body
$.map(getjson, function (v, k) {
//给tbobject添加键 和值
tbobj.append(‘<tr><td>‘ + k + ‘</td><td><a href="‘ + v + ‘">‘ + v + ‘</a></td></tr>‘)
});
});
});
完整代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>利用jQuery动态创建DOM</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var getjson = {
"百度": "http://www.baidu.com",
"新浪": "http://www.sina.com.cn",
"腾讯": "http://www.qq.com"
};
$(‘#btn‘).click(function () {
var tbobj = $(‘<table border="1"></table>‘).appendTo($(‘body‘));//appendTo表示添加到 body
$.map(getjson, function (v, k) {
//给tbobject添加键 和值
tbobj.append(‘<tr><td>‘ + k + ‘</td><td><a href="‘ + v + ‘">‘ + v + ‘</a></td></tr>‘)
});
});
});
</script>
<style type="text/css">
#ts {
border: 1px solid red;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" id="btn" value="创建一个表格" />
</body>
</html>
JQuery根据Json创建表格
时间： 2024-10-13 22:56:48