码迷,mamicode.com
首页 > 其他好文 > 详细

JQ 动态添加节点

时间:2014-05-22 15:53:33      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:style   class   c   java   ext   http   

<!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>
<style type="text/css">
.listyle
{
background-color: Red;
}
</style>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
var link = $("<a href=‘http://www.baidu.com‘>百度</a>");
$("div:first").append(link);
})

$(function() {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
$.each(data, function(key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
$("#tablesites").append(tr);
});

})
$(function() {
$("#RemoveUL").click(function() {
// $("ul li.listyle").remove();
$("ul li[class=listyle]").remove(); //返回被删除的项
});
});
$(function() {
$("#btntoright").click(function() {
var opt = $("#sl1 option:selected").remove();
$("#sl2").append(opt);
});
});
</script>

</head>
<body>
<div>
</div>
<table id="tablesites">
</table>
<ul>
<li>sdfsdfsdf</li>
<li class="listyle">sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li class="listyle ">sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li class="listyle">sdfsdfsdf</li>
</ul>
<br />
<input type="button" id="RemoveUL" value="删除" /><br />
<select id ="sl1" multiple ="multiple" size ="6" >
<option>山东</option>
<option>山东</option>
<option>山东</option>
<option>山东</option>
<option>山东</option>
<option>山东</option>
</select multiple ="multiple">
<input type ="button" value ="》》" id ="btntoright"/>
<select id ="sl2" multiple ="multiple" size ="6"></select>
</body>
</html>

JQ 动态添加节点,布布扣,bubuko.com

JQ 动态添加节点

标签:style   class   c   java   ext   http   

原文地址:http://www.cnblogs.com/sumg/p/3742733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!