<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
.st{
color:#FF0000;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
/**
*把json數據添充到頁面中去
*/
function initJson(){
var data=[{a:'張三',b:20,c:'男'},{a:'李四',b:50,c:'男'},{a:'王',b:18,c:'女'}];//數組中放的對象;
var tb=$("table[id=mytable11]")[0];//得到id="mytable11" 的ul
$("tr",tb).each(function(){
$(this).remove();//循環刪除原來table下的tr;
})
//添加表頭
$("<tr><td>姓名</td><td>年齡</td><td>性別</td></tr>").css("background-color","#0099ee").click(function(){
alert("這是表頭");
}).appendTo(tb);//把tr添加到tb中。
//添值
$(data).each(function(i){
var d=this;//this指當前對象.
if(i%2==0){//顯示樣式
$("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").addClass("st").click(function(){//添加鼠標點擊事件
alert(d.b);
}).appendTo(tb);//把tr添加到table中。
}else{
$("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").click(function(){
alert(d.b);
}).appendTo(tb);//把tr添加到tb中。
}
})
}
</script>
</head>
<body onload="initJson();">
<table id="mytable11" align="center">
<tr id="myheader">
</tr>
</table></body>
</html>JavaScript 與 Jquery 寫循環的對比
var jsonStr='[{name:"aaaa",sex:"1111"},{name:"bbbb",sex:"22222"}]';//模擬後臺返回的Json字符串
/**
*用js寫循環
*/
function test(){
var jsObj=eval('('+jsonStr+')');
for(var i=0;i<jsObj.length;i++){
alert(jsObj[i].name);
}
}
/**
*用jquery 寫循環
*/
function test2(){
var jsObj=eval('('+jsonStr+')');
$(jsObj).each(function(i){
alert(this.name);
});
}jquery ajax 向後臺傳需要的值。
/**
* 通用的提交修改。
* @param e：表示哪個div下面的input
*/
function doSubmit(e) {
// var $input = $("#" + e + " input");//指定div 下面的所有input 對象。
var obj = {};//定義一個存放參數的對象。
var mpid = $("#mpid").val();//頁面上的某個input 的value
obj['id'] = mpid;//存放key:value 數據。
$(" input", $("#" + e)).each(function() {//遍歷 某id='?' 下的所有input .
var key = this.name;
var value = this.value;
obj[key] = value;
});
$(" textarea", $("#" + e)).each(function() {//遍歷 某id='?' 下的所有textarea .
var key = this.name;
var value = this.value;
obj[key] = value;
});
var url = "/mp/updateMP";
$.ajax({
async : false,
url : url,
type : "post",
dataType : "json",
data : obj,
success : function(respStr) {
alert(JSON.stringify(respStr));
},
error : function(respStr) {
alert(JSON.stringify(respStr));
}
});
}jquery 操作 select 頁面控件。
[url=http://www.cnblogs.com/joboxs/p/3557436.html]http://www.cnblogs.com/joboxs/p/3557436.html[/url]
$(function(){
$("#mp_select").change(function(){
// alert($(this).val());//選中的option value 值;
});
});
$(":input+span", $("#regist")).each(function() {//遍歷 id=? 下的所有input相鄰的下一個 <span> 元素 .
$(this).remove();//將span 元素清除。
});動態獲取json 對象的key 和value
for ( var key in respStr.val) {
// alert("Key是:" + key + ";對應的值是:" + respStr.val[key]);
$("#" + key + "").remove();//清空
$("[name='" + key + "']").after(
"<span id='"+key+"' style='color:red;'>"
+ respStr.val[key] + "</span>");
}