怎么对jquery里的html(0里的对象改变样式和其他操作呢,可以在html()里面用js,css吗?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
json
</title>
<script type="text/javascript" src="jquery-1.6.2.js">
</script>
<style type="text/css">
.odd {
background-color:#CCFF00;
}
.stl {
border:thick;
border-collapse:collapse;
}
</style>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty();
var str="<table class='sortable' id='userinfo'><tbody><tr><td>Name</td><td>Sex</td><td>Email</td></tr>";
$.each(data, function(InfoIndex, Info){
str=str + "<tr><td>" + Info["name"] + "</td><td>" + Info["易做图"] + "</td><td>" + Info["email"] + "</td></tr>";
});
str = str + "</tbody></table>";
$("#divTip").append(str);
});
});
});
$("body").find(".sortable tbody tr:odd").addClass('odd');
$("body").find(".sortable tr:even").addClass('even');
$("body").find("#divTip table").addClass('stl')
</script>
<style type="text/css">
.stl {
border:thick;
border-collapse:collapse;
}
</style>
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip">
</div>
</div>
</div>
<script type="text/javascript">
$("body").find(".sortable tbody tr:odd").addClass('odd');
$("body").find(".sortable tr:even").addClass('even');
$("#divTip").find("table").addClass('stl')
</script>
<style type="text/css">
#div table{
border:thick;
}
</style>
</body>
</html>
那些js和样式都没有用,要怎么改呢
追问:$("body").find(".sortable tbody tr:odd").addClass('odd');
$("body").find(".sortable tr:even").addClass('even');
$("body").find("#divTip table").addClass('stl');
还是没有实现……[
{"name":"WJJ",
"易做图":"male",
"email":"wu@sina.com"
},
{"name":"LHF",
"易做图":"male",
"email":"lu@163.com"
}
]我用$("#divTip").append(str); str HTMLstring 生产了一个table,不行吗?
答案:如下修改
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
json
</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.odd {
background-color:#CCFF00;
}
#div table{
border:thick;
}
.stl {
border:thick;
border-collapse:collapse;
}
</style>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty();
var str="<table class='sortable' id='userinfo'><tbody><tr><td>Name</td><td>Sex</td><td>Email</td></tr>";
$.each(data, function(InfoIndex, Info){
str=str + "<tr><td>" + Info["name"] + "</td><td>" + Info["易做图"] + "</td><td>" + Info["email"] + "</td></tr>";
});
str = str + "</tbody></table>";
$("#divTip").append(str);
});
$("body").find(".sortable tbody tr:odd").addClass('odd');
$("body").find(".sortable tr:even").addClass('even');
$("body").find("#divTip table").addClass('stl');
});
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip">
</div>
</div>
</div>
</body>
</html>
其他:对象错了,#divTip 下面就没有table,你把里面的层次关系得搞清楚
上一个:哪里有好点的JS幻灯效果成品代码下载
下一个:js或者jquery 遍历Array([0]=>1,[1]=>3,[2]=>444)