内容简要:
当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<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>
原文地址:https://www.cnblogs.com/wjohh/p/10720670.html
时间: 2024-11-05 13:34:56