您的位置：首页 > Web前端 > JQuery

jQuery学习12---动态添加控件，网站列表的实现

2013-06-29 11:11 621 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title></title>
<script src="../jquery-1.8.2.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function()
{
//点击按钮时动态生成控件演示
$(":input[value=click]").click(function()
{
//在内存中创建一个jQuery对象
var $alink = $("<a id='a1' href='www.baidu.com'>baidu</a>");
//可以对对象设置样式，并添加事件
$alink.css("color","red");
$alink.click(function()
{
alert("hhaa");
return false;
});
//不会alert，因为a1还没有加载，可以放在append的后面
$("a1").click(function()
{
alert("a1");
return false;
});
//追加到d1,div结束标签之前。
$("#d1").append($alink);
});

//动态生成网战列表
var json = [{"name":"baidu","site":"http://www.baidu.com"},
{"name":"csdn","site":"http://www.csdn.net"},
{"name":"sina","site":"http://www.sina.com"}
];
//1、动态创建表格
var $tb = $("<table id='tb'></table>");
$tb.attr("border","1px");
$tb.attr("width","400px");
//2、把表格对象添加到div中
$("#sites").append($tb);
$.each(json,function()
{
//this，指代的是一个json对象，this.name就是name的值,this.site就是site的值
var $tr = $("<tr></tr>");
$tb.append($tr);

//在tr中有两列
var $td = $("<td><a href='"+this.site+"'>"+this.name+"</a></td>");
$tr.append($td);

$td = $("<td>"+this.site+"</td>");
$tr.append($td);
});
});
</script>
</head>
<!--
动态创建Dom节点
-->
<body>
<div id="d1">
aaaa<input type="text" />
</div>
<input type="button" value="click" />
<hr/>
<div id="sites">
<div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航