klsw

jquery动态创建节点

<!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">
.textitem { background-color:Yellow;}
</style>
<script src="Scripts/jquery-1.4.2.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.textitem").remove();
});
});
</script>
</head>
<body>
<div>
</div>

<table id="tableSites">
</table>

<ul>
<li>abc</li>
<li class="textitem">def</li>
<li>ghi</li>
<li class="textitem">abc</li>
<li>lmn</li>
</ul>

<input type="button" value="删除ul中的一部分" id="removeUL" />

</body>
</html>

posted on 2015-08-09 17:32  快乐地编程  阅读(320)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章:

  • 2021-12-25
  • 2022-12-23
  • 2022-12-23
  • 2021-11-30
  • 2021-08-22
  • 2022-02-07
  • 2022-02-07
猜你喜欢
  • 2022-02-07
  • 2022-02-07
  • 2021-08-24
  • 2021-11-30
  • 2022-01-07
  • 2021-10-24
  • 2021-05-26
相关资源
相似解决方案