zoukankan      html  css  js  c++  java
  • Html 改变原有标签属性

    内容简要:
    当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签
    例:当订单状体编程已支付的时候把该标签改成超链接“去评论”
    var pay = $("#"+obj.data[i]['pk']).html()
    if(pay == '已支付'){ $("#pay"+obj.data[i]['pk']).replaceWith('<a href="index.html" class="oper_btn">去评论</a>')}
     
    全部代码为:
    <!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" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<script src="./js/axios.js"></script>
    	<script src="./js/jquery-1.12.1.min.js"></script>
    	<script src="./js/jquery.cookie.js"></script>
    	<title>美多商城-用户中心</title>
    	<link rel="stylesheet" type="text/css" href="css/reset.css">
    	<link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
    	<div class="header_con">
    		<div class="header">
    			<div class="welcome fl">欢迎来到美多商城!
    					<span>|</span>
    					<a href="index.html">首页</a>
    			</div>
    			<div class="fr">
    				<div class="login_btn fl">
    					欢迎您:<em class="Show"></em>
    					<span>|</span>
    					<a @click="logout" href="http://127.0.0.1:8080/login.html">退出</a>
    				</div>
    				<div class="user_link fl">
    					<span>|</span>
    					<a href="user_center_info.html">用户中心</a>
    					<span>|</span>
    					<a href="cart.html">我的购物车</a>
    					<span>|</span>
    					<a href="user_center_order.html">我的订单</a>
    				</div>
    			</div>
    		</div>		
    	</div>
    
    	<div class="search_bar clearfix">
    		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
    		<div class="sub_page_name fl">|    用户中心</div>
    		<div class="search_con fr mt40">
    			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
    			<input type="button" class="input_btn fr" name="" value="搜索">
    		</div>		
    	</div>
    
    	<div class="main_con clearfix">
    		<div class="left_menu_con clearfix">
    			<h3>用户中心</h3>
    			<ul>
    				<li><a href="user_center_info.html">· 个人信息</a></li>
    				<li><a href="user_center_order.html" class="active">· 全部订单</a><br>
    					<a href="#" onclick="chengeorder('1')">· 已支付订单</a><br>
    					<a href="#" onclick="chengeorder('2')">· 未支付订单</a>
    				</li>
    				<li><a href="user_center_collect.html">· 商品收藏</a></li>
                    <li><a href="user_center_liulan.html">· 浏览历史</a></li>
    				<li><a href="user_center_site.html">· 收货地址</a></li>
    				<li><a href="user_center_pass.html">· 修改密码</a></li>
    
    			</ul>
    		</div>
    		<div class="right_content clearfix" id="show_orderlist"  >
    			<div class ="zhi1">
    				<h3 class="common_title2">全部订单</h3>
    				<ul class="order_list_th w978 clearfix">
    					<li class="col01">2016-8-21 17:36:24</li>
    					<li class="col02">订单号:56872934</li>
    				</ul>
    				<table class="order_list_table w980" id="showonthis" >
    					<!-- <tbody>
    						<tr>
    							<td width="55%">
    								<ul class="order_goods_list clearfix">					
    									<li class="col01"><img src="images/goods/goods001.jpg"></li>
    									<li class="col02">360手机 N6 Pro 全网通<em>2688.00元</em></li>	
    									<li class="col03">1</li>
    									<li class="col04">2688.00元</li>	
    								</ul>
    								<ul class="order_goods_list clearfix">					
    									<li class="col01"><img src="images/goods/goods001.jpg"></li>
    									<li class="col02">360手机 N6 Pro 全网通<em>2688.00元</em></li>	
    									<li class="col03">1</li>
    									<li class="col04">2688.00元</li>	
    								</ul>
    							</td>
    							<td width="15%">5276.00元</td>
    							<td width="15%">支付宝</td>
    							<td width="15%"><a href="#" class="oper_btn">去付款</a></td>
    						</tr>
    					</tbody> -->
    				</table>
    			</div>
    				<div class="pagenation">
    					<a href="#"><上一页</a>
    					<a href="#" class="active">1</a>
    					<a href="#">2</a>
    					<a href="#">3</a>
    					<a href="#">4</a>
    					<a href="#">5</a>
    					<a href="#">下一页></a>
    				</div>
    		</div>
    	</div>
    	<div class="footer">
    		<div class="foot_link">
    			<a href="#">关于我们</a>
    			<span>|</span>
    			<a href="#">联系我们</a>
    			<span>|</span>
    			<a href="#">招聘人才</a>
    			<span>|</span>
    			<a href="#">友情链接</a>		
    		</div>
    		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
    		<p>电话:010-****888    京ICP备*******8号</p>
    	</div>
    	
    </body>
    <script>
    		var rest = $.cookie('username')
    		$(".Show").html(rest);
    
    		var username = $.cookie('username')
    		// alert(username)
            let param = new URLSearchParams();
    			param.append('username',username);
    			axios({
    			url:'http://127.0.0.1:8000/md_admin/order_list',
    			data:param,
    			// params: {username: username},
    			method:'post',
    			responseType:'json'
    			})
    			.then(function(obj){
    				// console.log(obj.data);
    
    				let html = ''
    
    				for(var i=0;i<obj.data.length;i++){
    					if (obj.data[i]['fields']['status'] == '未支付'){
    						// alert(obj.data[i]['fields']['status'])
    						html += '<div id="notpay"><ul class="order_list_th w978 clearfix"><li class="col01" >生成时间:'+obj.data[i]['fields']['first_time'].replace('T',' ').replace('Z',' ')+'</li><li class="col02">订单号:'+obj.data[i]['fields']['order_id']+'</li></ul>'
    
    					}else if(obj.data[i]['fields']['status'] == '已支付'){
    						html += '<div id="yespay"><ul class="order_list_th w978 clearfix"><li class="col01" >'+obj.data[i]['fields']['first_time']+'</li><li class="col02">订单号:'+obj.data[i]['fields']['order_id']+'</li></ul>'
    
    					}
    					
    					html += '<table class="order_list_table w980"><tbody><tr><td width="55%">';			
    			
    					var datalist = JSON.parse(obj.data[i]['fields']['goods']);
    					
    					var price_count = 0
    					for(var x=0;x<datalist.length;x++){
    						html += '<ul class="order_goods_list clearfix"><li class="col01"><img src="'+datalist[x]['img']+'"></li><li class="col02">'+datalist[x]['price_name']+'<em>单价:'+datalist[x]['danjia_price']+'元</em></li><li class="col03">'+datalist[x]['sum']+'个</li><li class="col04">共:'+datalist[x]['danjia_price']*datalist[x]['sum']+'元</li></ul>'
    						price_count += datalist[x]['danjia_price']*datalist[x]['sum']
    					}
    					html += '</td><td width="15%">订单总计:'+price_count+'元</td><td width="15%" id="'+obj.data[i]['pk']+'">'+obj.data[i]['fields']['status']+'</td><td width="15%"><a href="#" onclick="zhifu('+price_count+','+obj.data[i]['pk']+')" class="oper_btn" class ="zhi" id="pay'+obj.data[i]['pk']+'">'+obj.data[i]['fields']['status_over']+'</a><a href="#" class="oper_btn" onclick="shanchu('+obj.data[i]['pk']+')">删除订单</a></td></tr></tbody></table></div>'
    
    				
    
    				}
    					$("#show_orderlist").html(html);
    
    					for(var i=0;i<obj.data.length;i++){
    
    						var pay = $("#"+obj.data[i]['pk']).html()
    			
    						if(pay == '已支付'){	
    
    							$("#pay"+obj.data[i]['pk']).replaceWith('<a href="index.html" class="oper_btn">去评论</a>')
    
    						}
    					}
    
    					});
    
    
    			function chengeorder(type){
    
    				if (type == 1){
    					$("#notpay").hide();
    					$("#yespay").show();
    					
    				}else if(type == 2){
    					$("#notpay").show();
    					$("#yespay").hide();
    				}
    				}
    
    				function shanchu(id){
    					let param = new URLSearchParams();
    					param.append('id',id);
    
    					axios({
    					url:'http://127.0.0.1:8000/md_admin/shanchu',
    					data:param,
    					method:'post',
    					responseType:'text'
    					})
    					.then(function(obj){
    						// console.log(obj.data);
    						if (obj.data == '删除成功'){
    							alert('删除成功')
    							window.location.href='http://127.0.0.1:8080/user_center_order.html'
    						
    						}
    				})
    				}
    			function zhifu(sum,id){
    				let param = new URLSearchParams();
    				param.append('sum',sum);
    				param.append('id',id);
    
    				axios({
    				url:'http://127.0.0.1:8000/md_admin/zhifu',
    				data:param,
    				method:'post',
    				responseType:'json'
    				})
    				.then(function(obj){
    					// console.log(obj);
    					window.location.href = obj.data.url
    
    			})
    			}
    
    </script>
    </html>
    

      

  • 相关阅读:
    数据库小记:根据指定名称查询数据库表名及根据指定名称查询数据库所有表中的字段名称(支持mysql/postgre)
    Java实现 LeetCode第30场双周赛 (题号5177,5445,5446,5447)
    Java实现第十一届蓝桥杯C/C++ 大学 B 组大赛软件类 省赛真题(希望能和各位大佬能一起讨论算法题:讨论群:99979568)
    Java实现第十一届蓝桥杯 省赛真题(希望能和各位大佬能一起讨论算法题:讨论群:99979568)
    Java引用类型之软引用(2)
    Java引用类型之软引用(1)
    Java引用类型
    对象的创建
    类的初始化
    初始化itable
  • 原文地址:https://www.cnblogs.com/wjohh/p/10720670.html
Copyright © 2011-2022 走看看