会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题

老师,我也遇到这个问题了    怎么转换的啊image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		
		<link rel="stylesheet" type="text/css" href="css/jd.css" />
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		
		<script type="text/javascript" src="js/jd.js"></script>
		
	</head>
	<body>
		
		<!--导航开始-->
		
			<div class="nav">
				
				<div class="warp">
					
					<ul class="nav_ul1">
						<li><a href=""><i class="iconfont">&#xe8ff;</i>京东首页</a></li>
						<li><a href="">配送到:北京</a></li>
					</ul>
					
					 
					<ul class="nav_ul2">
						<li><a href="">洋洋宝贝</a><span>|</span></li>
						<li><a href="">我的订单</a><span>|</span></li>
						<li><a href="">我的京东</a><span>|</span></li>
						<li><a href="">我的会员</a><span>|</span></li>
						<li><a href="">企业采购</a><span>|</span></li>
						<li><a href="">京东手机</a><span>|</span></li>
						<li><a href="">关注京东</a><span>|</span></li>
						<li><a href="">客服服务</a><span>|</span></li>
						<li><a href="">网站导航</a></li>
					</ul>
					
				</div>
				
				
			</div>
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		
			<div class="search">
				
				<div class="warp">
					
					<img src="img/logo.jpg" />
					
					
					<div  class="search_div">
						
						<input type="text"  class="search_text"/>
						<input type="button" value="搜索"  class="search_but"/>
						
					</div>
					
					
				</div>
				
				
			</div>
					
		<!--搜索框结束-->
		
		<!--标题开始-->
		
		<div class="title warp">
			
			<h3>全部商品</h3>
			
			<div>
				
				<span>配送至</span>
				
				<select>
					
					<option>昌平区</option>
					
					<option>顺义区</option>
					
					<option>大兴区</option>
					
					<option>朝阳区</option>
					
				</select>
				
			</div>
			
		</div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		
		<div class="tips warp">
			
			<ul>
				<li><input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>数量</li>
			</ul>
			
			
		</div>
		
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /></li>
				<li class="info_2"> <img src="img/img1.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button onclick="checkTest3(this,1)">-</button>
					<input type="text" value="1" />
					<button class="bot" onclick="checkTest3(this,2)">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"> <img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】联想电脑,第六代智能英特尔 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button checkTest3(this,1)>-</button>
					<input type="text" value="1" />
					<button class="bot" checkTest3(this,2)>+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"> <img src="img/img3.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button checkTest3(this,1)>-</button>
					<input type="text" value="1" />
					<button class="bot" checkTest3(this,2)>+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<!--商品详情展示结束-->
		
		
		<!--结算模块开始-->
		
		<div class="balance warp">
		
			<ul class="balance_ul1">
				<li><input type="checkbox" name="fav" onclick="checkTest1(this)" />全选</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已经选择<span>1</span>件商品</li>
				<li>总价<span>¥12</span></li>
				<li>
					<button class="butt">去结算</button>				
				</li>
			</ul>
			
		</div>
		<!--结算模块结束-->
		
	</body>
</html>

JS代码:

	//获得所有的多选框对象
	var fav = document.getElementsByName("fav");

//判断是否全选操作
function checkTest1(th){
	
	var flag = th.checked;
	
		for(var i in fav){
			fav[i].checked = flag;
		}	
	}

//单选决定全选操作
function checkTest2(){
	
	var flag = true;
	
	for(var i=1;i<fav.length-1;i++){
		
		if(!fav[i].checked){
			
			flag=false;
			break;
		}		
	}
	//决定框是否勾选
	fav[0].checked = flag;
	
	fav[fav.length-1].checked = flag;
}

//控制数量的增加和减少
function checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
		
	 //获得下一个节点
	 pre = th.nextElementSibling;
	 
	 if(Number(pre.value)>0){
	 	//获得节点的value值
	pre.value = Number(pre.value)-1;
	 }

	}else{
		
	 //获得上一个节点对象
	 pre=th.previousElementSibling;
	 
	 //获得节点的value值
	pre.value = Number(pre.value)+1;
	
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价         parentNode:父节点      innerHTML:该商品的价格
	var val = pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格       Number(pre.value):商品的数量
	var zong = Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	pre.parentNode.nextElementSibling.innerHTML = "¥"+zong;
	
}




JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 676楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5 679楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 680楼

image.png

JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 681楼
JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 683楼

问题1:

        老师为什么只有用户名那一行的两个列设置了宽度为150px和400px却作用到了整个表单的列呢?我加上边框之后看的更明显了,不应该只作用在用户名的那一行吗?


问题2:

        设置行高为35px 仅仅是为了更美更吧


table源码如下:

<table align="center"	border="2px">
				
				<tr height="35px">
					<td width="150px">用户名:</td>
					<td width="400px">                                        <!--失去焦点时进行方法调用-->
						<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
						<span id="uname_span">*用户名必须是3~5位的汉字</span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd(	)"/>
						<span id="pwd_span"></span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>手机号:</td>
					<td>
						<input type="number" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phone_span"></span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>邮箱:</td>
					<td>
						<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()"/>
						<span id="email_span"></span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>性别:</td>
					<td>
						男:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
						女:<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/>
						<span id="sex_span"></span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" />抽烟
						<input type="checkbox" name="fav" id="" value="2" />喝酒
						<input type="checkbox" name="fav" id="" value="3" />烫头<br />
						<input type="checkbox" name="fav" id="" value="4" />泡妞
						<input type="checkbox" name="fav" id="" value="5" />撩妹
						<input type="checkbox" name="fav" id="" value="6" />吹牛
					</td>
				</tr>
				
				<tr height="35px">
					<td>籍贯:</td>
					<td>
						<!--默认值发生改变就是已选择,对应事件为onchange-->
						<select name="address" id="sel" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">安徽</option>
							<option value="2">江苏</option>
							<option value="3">河南</option>
							<option value="4">河北</option>
							<option value="5">湖南</option>
							<option value="6">湖北</option>
						</select>
						<span id="sel_span"></span>
					</td>
				</tr>
				
				<tr height="35px">
					<td>验证码:</td>
					<td>
						<input type="number" name="yzm" id="yzm" value="" onblur="checkYZM()"/>
						<span id="yzm_span"></span>
						<span id="yzm2_span"></span>
						<input type="button" name="" id="" value="获取验证码"  onclick="YZM()"/>
					</td>
				</tr>
				
				<tr height="35px">
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="8" cols="30"></textarea>
					</td>
				</tr>
				
				<tr height="35px">
					<td colspan="2" align="center">
						<input type="checkbox" name="" id="check" value="" onclick="checkAgree()"/>是否同意本公司协议
					</td>
				</tr>
				
				<tr height="35px">
					<td align="center" colspan="2">
						<!--disabled="disabled"或者disabled="true"都表示不可用的-->
						<input type="submit" name="" id="sub" value="注册" disabled="disabled"/>	
					</td>
				</tr>
				
			</table>

实现效果如下:

image.png





JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 685楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 686楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5 687楼

老师,请问为什么新增的行取消勾选后,全选项无法自动取消勾选?我自己写的和老师的案例也是这样,请问是哪里有问题?

$(function(){
	/*************全选***********************/
	$("#chks").click(function(){
		var flag = $("#chks").prop("checked");
		$("input[name='chk']").prop("checked",flag);
	})
	/*************判断是否全选*****************/
	$("input[name='chk']").click(function(){
		var flag = true;
		
		var ck = $("input[name='chk']");
		
		ck.each(function(){
			if(!$(this).prop("checked")){
				flag = false;
			}
		})
		$("#chks").prop("checked",flag);
	})
	/************反选*******************/
	$("#fx").click(function(){
		var chk = $("input[name='chk']");
		
		chk.each(function(){
			var flag = $(this).prop("checked");
			$(this).prop("checked",!flag);
			
		})
		flag1 = true;
		chk.each(function(){
			if(!$(this).prop("checked")){
				flag1 = false;
			}
		})
		$("#chks").prop("checked",flag1);
	})
	
	/************新增一行*********************/
	$("#addRow").click(function(){
		var tb = $("#ta");
		tb.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td>《Java编程之道》</td>'+
				'<td>wollo</td>'+
				'<td>10</td>'+
			'</tr>')
	})
	
	/************删除行**********************/
	$("#delRow").click(function(){
		var ck = $("input[name=chk]:checked");
		if(ck.length==0){
			alert("请至少选择一行");
		}else{
			ck.parent().parent().remove();
		}
	})
	
	
	
	/***************复制行********************/
	$("#copyRow").click(function(){
		var ck = $("input[name='chk']:checked");
		var tb = $("#ta");
		if(ck.length==0){
			alert("请选择至少一行");
		}else{
			tb.append(ck.parent().parent().clone());
		}
		
	})
	
})


JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 690楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637