内容简要：
当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<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="data: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="data: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="data: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>

　　

Html 改变原有标签属性的更多相关文章

  1. JavaScript dom 标签属性

    节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1    --> <a>,<p>...... 属性节点:nodeType值是 2    --> t ...

  2. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  3. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  4. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...

  7. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

  8. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  9. 6-[HTML]-标签属性

    1.HTML标签属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中.如 <div id="i1">这是一个div标签</div> < ...

随机推荐

  1. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2-新增锁定用户与解除锁定用户的功能

    锁定用户功能在现实应用场景中得到了大量的应用,当我们需要限制某用户的登录,又不能删除这个用户时就可以使用锁定功能,如:未授权的用户尝试错误密码错误过多可以尝试的用户进行锁定,又如ATM机上取钱时密码错 ...

  2. CentOS6.5下DNS服务器搭建与配置

    一.安装机器情况 192.168.1.70(dns 主节点) 192.168.1.71(dns 从节点) 二.主节点DNS的安装及配置 1. DNS服务器所需的软件包安装 yum -y install ...

  3. 痞子衡嵌入式：常用的数据差错控制技术（1）- 重复校验(Repetition Code)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-重复校验. 在嵌入式应用里,除了最核心的数据处理外,我们还会经常和数据传输打交道.数据传输需要硬件传输接口的支持 ...

  4. javascript基础修炼(11)——DOM-DIFF的实现

    目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...

  5. shell32.dll 控制网络

    //禁用 SetNetworkAdapter(False) //启用 SetNetworkAdapter(True) //添加引用system32/shell32.dll private static ...

  6. MySQL 笔记整理（8.b） --事务到底是隔离还是不隔离的？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 8.a) --事务到底是隔离还是不隔离的? 本周工作较忙,加上懒惰,拖更 ...

  7. SpringBoot 整合 apollo

    简介 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景 ...

  8. (4)Maven快速入门_4在Spring+SpringMVC+MyBatis+Oracle+Maven框架整合运行在Tomcat8中

    利用Maven 创建Spring+SpringMVC+MyBatis+Oracle 项目 分了三个项目  Dao   (jar)   Service (jar)   Controller (web) ...

  9. Maven（十五）Maven 聚合

    聚合解决的问题: 解决每个模块之间都要一个一个安装,一键安装各个模块工程 尤其时在配置继承后要先安装子模块在安装父,模块. 配置方式 自己找一个工程作为聚合工程,配置好后在聚合工程上运行Maven i ...

  10. iOS----------关于Cornerstone的偏好设置

    应用场景:有时候我们的项目会导入一些第三方.a文件,但是当我们在svn上check out下来的时候,会发现少了一些.a文件.于是乎项目就报错了. 针对这种情况,我们应该怎么办呢? 1.先打开Corn ...