`
ileson
  • 浏览: 210540 次
  • 性别: Icon_minigender_1
  • 来自: 河南省
社区版块
存档分类
最新评论

jquery+json

    博客分类:
  • RIA
阅读更多
<!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 页面控件。
http://www.cnblogs.com/joboxs/p/3557436.html
$(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>");
					}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics