有效沟通问答-【官方】百战程序员_IT在线教育培训机构

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 132837个问题

时间排序推荐排序

请问老师：

1.为什么是无颜色

2.为什么我把<script>标签里的[0]去掉后，下一行改为红色就没用了

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 526楼

老师好，我有个疑问，$（function）()这个页面加载后执行的函数，是一直会执行吗，不然这个函数里的事件怎么能一直有效呢。

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 527楼

老师好，为什么这里变量错误也能获取正确的值。

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 528楼

老师是不是直接使用$(this)来获得对象就不需要用$(th)来接收参数了，我试了一下，发现写不写$(th)都不影响方法的执行效果

function bul(th){
	var par = $(this).parent().parent();
	par.children().eq(3).html(this.value);//或者转成JQ对象再调用val来获得值
}

写不写$(th)都不影响方法的执行效果这是因为 bul() 方法内嵌在input里面的原因吗

tab.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>&nbsp'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>');

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 529楼

问题一：

老师，我想在点击新增一行这个按钮时新增的一行可以自定义书名，作者，数量，但是我发现我写的代码只能自定义书名和作者，而且数量随着书名和作者的值变化而变化，如果先在书名里面写张三那么数量也变为张三，然后在作者里面写李四，这时候数量又变成了李四，老师这个我该怎么解决

问题二：

我在书名，作者和数量的input里面都调用了失去焦点的方法，为什么只有数量可以成功调用，写完之后鼠标点击其他地方文本框边框消失，而作者和书名却不行

问题动图如下：

GIF.gif

源码如下：

html：

<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
	 
	 	<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/gwc.js"	type="text/javascript" charset="UTF-8"></script>
		
	</head>
	<body>
		<h3>jQuery操作表格</h3>
		<hr />
		<input type="button" id="fx" value="反选" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="删除行" />
		<input type="button" id="copyRow" value="复制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
				<td width="200px">书名</td>
				<td width="200px">作者</td>
				<td width="200px">数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr id="">
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《Java编程之道》</td>
				<td>wollo</td>
				<td>10</td>
				<td>
					<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《Python和我的故事》</td>
				<td>赵老师</td>
				<td>10</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《web开发详解》</td>
				<td>张老师</td>
				<td>30</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>			
		</table>
	</body>
</html>

JS：

$(function(){

	
	//确定全选和全部不选操作
	
	$("#chks").click(function(){
		
		var flag = $(this).prop("checked");//返回布尔类型
		
			$("input[name=chk]").prop("checked",flag);//让所有内容都选中

	})
	
	//判断是否全选的操作
	$("input[name=chk]").click(function(){
		
		var flag = true;
		
		var chk = $("input[name=chk]");
		
		//each：遍历		每次遍历执行funaction 里面的内容
		chk.each(function(){
			
			if(!$(this).prop("checked")){
				
				flag = false;
				
				return;
			}
			
		})
		
		$("#chks").prop("checked",flag);
		
	})
	
	//反选的操作
	$("#fx").click(function(){
		
		//拿到所有的多选框
		var chx = $("input[name=chk]");
		
		//遍历
		chx.each(function(){
			
			//获得每个多选框的初始状态
			var flag = $(this).prop("checked");
			
			//现有状态与原始状态进行取反
			$(this).prop("checked",!flag);
		})
	})
	
	//新增加一行的操作
	$("#addRow").click(function(){
		
		//获得tab对象
		var tab = $("#ta");
		
		tab.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>&nbsp'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>');
		
	})
	
	//删除的操作
	$("#delRow").click(function(){
		
		//获得被选中的name=chk的单选框
		var del = $("input[name=chk]:checked");
		
		if(del.length==0){//如果一行没选
			alert("至少选择一行！");
		}else{
			
			//执行删除整行的操作	单选框的父节点是	td	,	td	的父节点是	tr
			del.parent().parent().remove();
		}
		
	})
	
	//复制行		选中几个复制几个
	$("#copyRow").click(function(){
		
		//获得被选中的name=chk的多选框
		var copy = $("input[name=chk]:checked");
		
		if(copy.length==0){//如果一行没选
			alert("至少选择一行！");
		}else{
			//执行copy的操作
			
			//复制
			var tr = copy.parent().parent().clone();//克隆整行
			//黏贴
			$("#ta").append(tr);
			
		}
	})
	
})

//修改数量的操作

function change(th){//这里的this是JS类型的，得转换成JQ对象
	
	//$(th):转换成JQ对象		获得	tr	结点
	var par = $(th).parent().parent();
	
	//将写死的数量变成可以定义的文本框
	par.children().eq(3).html("<input	type='text' size='3px' onblur='bul(this)'/>");
}

function bul(th){
	
	var par = $(th).parent().parent();
	
	par.children().eq(3).html(th.value);//或者转成JQ对象再调用val来获得值
}

function del(th){
	
	var par = $(th).parent().parent();
	
	par.remove();
	
}

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 530楼

问题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>

实现效果如下：

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 531楼

老师，我在打开页面之后直接选中某一个单选框，（不改变数量值的情况下，）总价显示的是NaN（如图）

但在我更改数量之后，就会显示数字结果了，当我再改变数量为1的时候还是会有数字的（如图），这是怎么回事呢？

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 532楼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--标题标签  h1-h6自动加粗加黑  会自动换行  -->
		<h1>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
		<h2>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h2>
		<h3>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h3>
		<h4>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h4>
		<h5>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h5>
		<h6>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h6>
	</body>
</html>

换浏览器打开还是显示不出来，多次刷新还是显示不出来，用notepad，显示出来了，请问老师怎么解决？问题出在哪呢？

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 533楼

老师您好，我也遇到了使用HBuilder编写的自动跳转网页使用那个浏览器都跳转不过去。

但是，我用了notepad++编写了，跳转过去了。

请问老师这是什么原因造成的呢？

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 534楼

老师，如何在新增的行中也可以执行“添加”的行为呢？我试了试发现不会做所以来请教您...可以给个代码便是更好了！！

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 535楼

老师，我在输入td3的内容时，内容和您的一样，但是出来的结果图是不大一样的，这是怎么回事呢？

（如图）

这是我输入的代码

展现的图如下：

老师的代码：

展现的图如下：

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 536楼

那么这个标题框是不是就只能一个div后面跟两个值，而不能进行嵌套那样写呀？如果可以嵌套请老师写一下我研究研究

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 537楼

老师为什么搜索框的div class可以写成以下这样，而标题框却不能写成下面这样呢

	<!--搜索框开始-->
		
		<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按照上面的写分别定义两个div和class：则运行结果如下

<!--标题开始-->
		<div	class="title">
			<div	class="warp">
			<h3>全部商品</h3>
			
			<div>
				<span>配送到</span>
				
				<select>
					
					<option>昌平区</option>
					<option>朝阳区</option>
					<option>海定区</option>
					<option>顺义区</option>
					<option>大兴区</option>
					
				</select>
			</div>
			</div>
			
		</div>
		<!--标题结束-->

但是搜索框的div和class却可以在一个class中定义两个名字这样写而页面不会被打乱

	<!--搜索框开始-->
		
		<div	class="search warp"> 
			
			<!--<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>
		
		<!--搜索框结束-->

附上warp的CSS部分：

.warp{
	
	width: 1000px;
	/*设置div居中*/
	margin: 0px auto;
	
}

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 538楼

老师，在这样的代码中（如图），想要让里面的内容居中，就要在.top里输入text-align: center;而不是在.top_a中输入，这是为什么呢？

以下是效果图：（.top）（.top_a）

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 539楼

老师，当我依次点击三个多选框时，第一个和最后一个全选框没有反应，但是当我点击第一个或者最后一个全选框时三个多选框都会被选中，如果点击第一个或者最后一个全选框之后再去掉三个多选框中的任何一个第一个和最后一个全选框也都会被取消，请问老师，我该如何解决只点击三个多选框而出发全选框被选中呢

GIF.gif

代码如下：

html部分：

<!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"/>
		
		<!--引入JS文件-->
		<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">&#xe620;</i>京东首页</a></li>
						<li><a href="">配送到：北京</a></li>
					</ul>
					
					<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>
						
					</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>
					<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">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<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">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="fav" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<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>【京东超市】desha春秋季儿童休闲服</a></li>
					<li class="info_4"><a>颜色：灰色+粉红</a></li>
					<li class="info_5">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<a>删除</a><br />
						<a>移到我的关注</a>
					</li>
				</ul>
			</div>
			
		
		<!--商品详情展示结束-->
		
		<!--结算模块开始-->
		<div class="balance warp">
			<ul class="balance_ul1">
				<li>
					<input type="checkbox" name="fav" id="" value="" 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部分：



//获得所有name=fav的多选框对象		定义成全局变量
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;//但凡有一个多选框没被选中剩下的就可以不用判断了，跳出循环
		}
		
		
	}
	
	//根据flag的值决定全选框是否被勾选
	
	fav[0].checked = flag;//下标为0对应的是第一个全选框
	
	fav[fav.length-1].checked = flag;//下标为length-1对应的是最后一个全选框
	
	console.log(fav[0].checked);
	console.log(fav[fav.length-1].checked);
	
}

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 540楼

同学您好