js实战-添加指定行以及review知识

标签：实战 review tr js srcElement fruit tbl var event

资料来源于：B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ，本人才疏学浅，记录笔记以供日后回顾
视频链接

review css与js 相关知识

1.CSS
  1) CSS的角色：页面显示的美观风格
  2) CSS的基础语法：标签样式；类样式；ID样式；组合样式；嵌入式样式表；内部样式表；外部样式表
  3) 盒子模型：border、margin、padding
  4) 定位和浮动：position、float、DIV+CSS布局

2.JS
  1) JS是客户端（浏览器端）运行的脚本语言，语法风格和java比较类似
  2) JS是弱类型的语言 var str = 99 ;
  3) JS的函数  function hello(var num){}
  4) DOM技术:
	4-1) 鼠标悬浮：onmouseover,event.srcElement,事件传递,parentElement,style.backgroundColor
	     鼠标离开：onmouseout
	4-2) 鼠标点击：hand/pointer,onclick , td.innerText , td.innerHTML="<input type='text'/>", td.firstChild.value=oldPrice
	     失去焦点：onblur , input.parentElement.innerText = newPrice ;
	     更新小计：input = event.srcElement , tr = input.parentElement.parentElement ; tr.cells , parseInt
	     更新总计：document.getElementById("fruit_tbl") , fruitTbl.rows 
	4-3) 删除一行：img , img.parentElement.parentElement.rowIndex , table.deleteRow(rowIndex)

添加指定行的示例代码

此功能为通过点击button按钮，将文本框中输入的数据，添加到表格中，并计算小计、总计，且使新增的行上也绑定相关事件。

个人想法

个人感觉还是有些无从下手，不知道怎么写，写的时候需要注意名称前后一致，如果显示不出来想要的结果，可以通过控制台打印输出来检查。具体代码说明可见下文中的注释。还有就是调css样式感觉不太好搞，需要一些空间想象能力。

html示例代码

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo05.css">
		<script type="text/javascript" src="js/demo09.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称</th>
						<th class="w20">单价</th>
						<th class="w20">数量</th>
						<th class="w20">小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>5</td>
						<td>20</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>	
						<td>西瓜</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>4</td>
						<td>25</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>3</td>
						<td>30</td>
						<td>90</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
				<hr/>
				<div id="add_fruit_div">
					<table id="add_fruit_tbl">
						<tr>
							<td class="w30">名称：</td>
							<td><input class="input" type='text' id='fname' value="apple"/></td>
						</tr>
						<tr>
							<td>单价：</td>
							<td><input class="input" type='text' id='price' value="5"/></td>
						</tr>
						<tr>
							<td>数量：</td>
							<td><input class="input" type='text' id='fcount' value="100"/></td>
						</tr>
						<tr>
							<th colspan="2">
								<input type='button' id="addBtn" class="btn" value="添加"/>
								<input type='button' class="btn" value="重填"/>
							</th>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

css示例代码

*{
	color: threeddarkshadow;
}
body{
	margin:0;
	padding:0;
	background-color:#808080;
}
div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:100%;
	border:0px solid blue;
	margin-left:10%;
	float:left;
	background-color: honeydew;
	border-radius:8px;
}
#div_fruit_list{
	width:100%;
	border:0px solid red;
}
#tbl_fruit{
	width:60%;
	line-height:28px;
	margin-top:120px;
	margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
	border:1px solid gray;
	border-collapse:collapse;
	text-align:center;
	font-size:16px;
	font-family:"黑体";
	font-weight:lighter;
	
}
.w20{
	width:20%;
}
.delImg{
	width:24px;
	height:24px;
}
.btn{
	border:1px solid lightgray;
	width:80px;
	height:24px;
}
#add_fruit_div{
	border:0px solid red;
	width:40%;
	margin-left:30%;
}
#add_fruit_tbl {
	margin-top:32px;
	width:80%;
	margin-left:10%;
	border-collapse:collapse;
}
#add_fruit_tbl , #add_fruit_tbl tr , #add_fruit_tbl td{
	border:1px solid lightgray;
	text-align:center;
	line-height:28px;
}
.w30{
	width:30%;
}

.input{
	padding-left:4px;
	border:1px solid lightgray;
	width:90%;
}

js示例代码

//因为使用的地方比较多，我们可以把获取对象的这个部分抽取成一个方法，这样下面就可以直接调用方法了
function $(id){
	return document.getElementById(id);
}

window.onload=function(){
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl =  $("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows ;
	for(var i = 1 ; i<rows.length-1 ; i++){
		var tr = rows[i];
		trBindEvent(tr);
	}


        //给按钮绑定点击事件
	$("addBtn").onclick=addFruit;
}

//在tr上绑定事件
function trBindEvent(tr){
	//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		tr.onmouseover=showBGColor;
		tr.onmouseout=clearBGColor;
		//获取tr这一行的所有单元格
		var cells = tr.cells;
		var priceTD = cells[1];
		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTD.onmouseover = showHand ;
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick=editPrice;


		//7.绑定删除小图标的点击事件
		var img = cells[4].firstChild;
		if(img && img.tagName=="IMG"){
			//绑定单击事件
			img.onclick = delFruit ;
		}
}

//添加水果信息
function addFruit(){
        //获取对应文本框中的值
	var fname = $("fname").value;
        //记得转换成数值类型
	var price = parseInt($("price").value);
	var fcount = parseInt($("fcount").value);
	var xj = price * fcount ;

	var fruitTbl =  $("tbl_fruit");
        //  获取到表格后，调用添加一行方法，方法参数传索引位置，如果不传的话，默认添加在最后一行。
	var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
        // insertCell() 是在该行上添加一个格子，需要几个格子就调几次
	var fnameTD = tr.insertCell();
        // 给格子中内容赋值
	fnameTD.innerText = fname ;

	var priceTD = tr.insertCell();
	priceTD.innerText = price ;

	var fcountTD = tr.insertCell();
	fcountTD.innerText = fcount ;

	var xjTD = tr.insertCell();
	xjTD.innerText = xj ;

	var imgTD = tr.insertCell();
        // 图片这边就不能是innerText了，需要改成innerHTML，这样会解析
	imgTD.innerHTML = "<img src='imgs/del.jpg' class='delImg'/>";

	updateZJ();
        //  需要在tr上绑定事件，把绑定事件也抽取为一个方法
	trBindEvent(tr);

}

function delFruit(){
	if(event && event.srcElement && event.srcElement.tagName=="IMG"){
		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
		if(window.confirm("是否确认删除当前库存记录")){
			var img = event.srcElement ;
			var tr = img.parentElement.parentElement ;
			var fruitTbl = $("tbl_fruit");
			fruitTbl.deleteRow(tr.rowIndex);

			updateZJ();
		}
	}

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var priceTD = event.srcElement ;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTD.innerText ;
			//innerHTML 表示设置当前节点的内部HTML
			priceTD.innerHTML="<input type='text' size='4'/>";
			// <td><input type='text' size='4'/></td>
			var input = priceTD.firstChild;
			if(input.tagName=="INPUT"){
				input.value = oldPrice ;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
				input.onblur=updatePrice ;

				//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
				input.onkeydown=ckInput;
			}
		}
		
	}
}

//检验键盘摁下的值的方法
function ckInput(){
	var kc = event.keyCode ;
	// 0 ~ 9 : 48~57
	//backspace : 8
	//enter : 13
	//console.log(kc);

	if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){
		event.returnValue=false;
	}

	if(kc==13){
		event.srcElement.blur();
	}

}

//更新单价的方法
function updatePrice(){
	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
		var input = event.srcElement ;
		var newPrice = input.value ;
		//input节点的父节点是td
		var priceTD = input.parentElement ;
		priceTD.innerText = newPrice ;

		//5. 更新当前行的小计这一个格子的值
		//priceTD.parentElement td的父元素是tr
		updateXJ(priceTD.parentElement);

	}
}

//更新指定行的小计
function updateXJ(tr){
	if(tr && tr.tagName=="TR"){
		var tds = tr.cells;
		var price = tds[1].innerText ;
		var count = tds[2].innerText ;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj ;

		//6. 更新总计
		updateZJ();
	}

}

//更新总计
function updateZJ(){
	var fruitTbl = $("tbl_fruit");
	var rows = fruitTbl.rows ;
	var sum = 0 ;
	for(var i = 1; i<rows.length-1 ; i++){
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
		sum = sum + xj ;
	}
	rows[rows.length-1].cells[1].innerText = sum ;
}


//当鼠标悬浮时，显示背景颜色
function showBGColor(){
	//event : 当前发生的事件
	//event.srcElement : 事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);	--> TD
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement ;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "navy" ;

		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="white";
		}
	}
}

//当鼠标离开时，恢复原始样式
function clearBGColor(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		var tr = td.parentElement ;
		tr.style.backgroundColor="transparent";
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//cursor : 光标
		td.style.cursor="hand";
	}

}

标签：实战,review,tr,js,srcElement,fruit,tbl,var,event
From： https://www.cnblogs.com/fgcs111/p/17159380.html