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

<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 全系列/第五阶段：Web全栈开发基础与Vue/Jquery（旧） 91楼

老师，这个内边距指的是边框与内容的距离，不太理解，比如说li标签里面的”新闻“，padding-left

为15px，意思是不是下面这样的

就是每一个内容外面有一个隐藏的边框，padding-left=15px就是上面图的意思

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/CSS3（旧） 92楼

为什么我的网络路径复制其他的网络图片显示不出来，就百度的可以

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/HTML5（旧） 93楼

请教老师：方法function test（th）{} 这里的（th）和html里面onclick="test(this)"的（this）怎么理解呢？

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Javascript 语言（旧） 94楼

老师，为什么我复制粘贴到桌面上的时候，只显示1的图片，2的图片就不显示了？再Hbilder的时候，只显示2的图片，不显示1的图片，我还可以理解，是因为在Hbilder运行中不支持绝对路径。

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/HTML5（旧） 95楼

老师，为什么这里的flag的属性是undifined？

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Jquery（旧） 96楼

//设置当前的div隐藏
			//document.getElementById("div_1").style.display="none";
			document.getElementById("div_1").style.display="none";

本节课最后去点input框的操作和课上讲的一样呢有个报错

Uncaught TypeError: Cannot read properties of null (reading 'style')

百度没有找到太好的答案

老师给解答一下

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Javascript 语言（旧） 97楼

老师，图片无法显示以后，图片所在的位置就会让出来，这怎么解决？我看视频里老师的图片无法显示了，但是图片占用的位置没改变啊

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/HTML5（旧） 98楼

布置单选的时候，第一个为甚么点不动呢；

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Javascript 语言（旧） 99楼

老师为什么这个是无颜色？还有一个，div忘记加class了，代码是错的。

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Javascript 语言（旧） 100楼

老师，static 初始定位的操作是怎么用的，这里没看到视频老师讲

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/CSS3（旧） 101楼

老师，有个问题：在对页面文本进行获取时，若是这个div中有多个文本，有p有span有h3等等，我发现获取的是一个整体的文本，想去获取特定的文本，还不可以（我就使用id指向特定的标签，发现获取的文本也是整体）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作页面的文本和值</title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#but1").click(function() {
					// 获得HTML文本内容
					var html = $("#div1").html();
					console.log(html);
					// 仅获得文本内容
					var text = $("#div1").text();
					console.log(text);
					
					var p = $("#p").text();
					console.log(text);
				})
			})
		</script>
	</head>
	<body>
		<input type="button" name="" id="but1" value="对文本和值进行操作" />
		<div id="div1">
			<span id="">
				我是北京尚学堂
			</span>
			<p id="p">我还是北京尚学堂</p>
			<h3>我依然是北京尚学堂</h3>
		</div>
	</body>
</html>

结果：

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Jquery（旧） 102楼

老师，我的代码邮箱和数字的功能都没有实现，是什么问题呢？

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/HTML5（旧） 103楼

老师如果单价是￥199表示的该怎么进行数学计算？

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/Javascript 语言（旧） 104楼

老师虽然在1111111111111111111，设定了列的宽度，为什么添加内容过多，宽度还是发生了改变？怎么保持表格大小不变啊？

JAVA 全系列/第五阶段：Web全栈开发基础与Vue/HTML5（旧） 105楼

同学您好