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>

  

原文地址:https://www.cnblogs.com/wjohh/p/10720670.html

时间: 2024-11-05 13:34:56

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

js改变标签属性于js事件

1.     函数都有返回值-- 而方法的本质也是函数,所以也有返回值. Document.getElementById() 返回的是获取的标签 getElementsByClassName()和getElementsByTagName()返回的是一个数组 Document.getElementsByClassName("name")[2].innerHTML="hahha" 2.     改变标签的属性 元素.属性名    属性单词  attribute 3.  

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

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

SSIS:使用自定义的变量 改变 原有数据库连接的相应参数的值

1.创建变量,并设置初始值 2.在Connection Manager 中创建数据库连接 3.打开新建数据库连接的属性(单击该新建链接,按F4,或右击,选项 属性),点击Expressions 后面的 ...按钮 4.在弹出的Property Expressions Editor 窗体中,Property列中,在DropDownList中选择InitialCatelog和ServerName参数,然后点击相对应的Expression 列的 ...按钮 5.在新弹出的Expression Buil

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video> 标签属性; src:视频的URL; poster:视频封

HTML5 audio标签属性,方法,事件汇总

1.<audio> 标签属性 src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 [html] view plaincopy <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> 2.<video> 标签属性 src:视频的URLposter:视频封面,没有播放时

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

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标签属

JavaScript DOM学习笔记之标签属性

节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1    --> <a>,<p>...... 属性节点:nodeType值是 2    --> title,href,src...... 文本节点:nodeType值是 3    --> 内容 获取html标签内容: document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容 document.getElementsByTa

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

HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码   1.   <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video>标签属性: src

html标签属性(attribute)和dom元素的属性(property)

attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应dom元素的自身属性.从操作方法上来看,attribute可以通过dom core规范的接口 getAttribute和setAttribute 进行获取修改,而property可以通过对象访问属性的方式 . 或者 ["  "]来修改获取. 但是对于ie6,7,8(Q)模式下,会与标准w3c浏览