jquery+json

最新推荐文章于 2024-06-24 11:05:02 发布

Leson_Yin

最新推荐文章于 2024-06-24 11:05:02 发布

阅读量107

点赞数

分类专栏： RIA 文章标签： json jQuery C C++ C# ViewUI

本文链接：https://blog.csdn.net/ileson/article/details/83774287

版权

RIA 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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>");
					}

Leson_Yin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+json

[code="html"] 无标题文档 .st{ color:#FF0000; } /** *把json数据添充到页面中去 */ function initJson(){ var data=[{a:'张三',b:20,c:...
复制链接

扫一扫