Web课程作业收获与记录——超low的购物车作业

1. js获取表格中按钮所在行

按钮事件
<button onclick="deleteRow(this)">删除</button>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
js响应函数
function deleteRow(x){
			var row = x.parentNode.parentNode.rowIndex;//我理解的是：获取按钮父节点（也就是所在单元格）的上一父节点（也就是所在行）。
			document.getElementById("myTable").deleteRow(row);//执行删除
		}

2.js获取表格某一列控件的值

body中实现的是对某一列type为text，name为money的input控件实现求和，并将值赋给另一text文本框
function sum(){
			var tab = document.getElementsByName("money");//使用getELementsByName();函数获取同一名称的文本框数组
			var cb = document.getElementsByName("books");//这是获取复选框，来实现点击复选框选中项才能求和的功能
			var sum = 0;
			for(var i = 0; i < tab.length; i++){
				if(cb[i].checked){//判断是否被选中
					sum = parseFloat(tab[i].value) + sum ;//因为text是String类型，所以要转型
				}
			}
			document.getElementById("allSum").value = sum.toFixed(2);//注意toFixed(2)方法是将sum的精度控制为2位
		}

3.js实现全选与全不选功能

body中设置全选事件
<input type="checkbox" id="all" onclick="allSelected()" /><span id="alls">全选</span>

++++++++++++++++++++++++
js中实现全选函数
function allSelected() {
	        var cball = document.getElementById("all");//获取全选复选框id
	        var cbs = document.getElementsByName("books");//获取子复选框数组
	        if (cball.checked) {//判断全选复选框是否被选中
	            for (var i = 0; i < cbs.length; i++) {//循环设置子复选框的状态
	                cbs[i].checked = true;
	            }
	            document.getElementById("alls").innerHTML = "全不选";//更改<span>标签内容
	        } else {//同理
	            for (var i = 0; i < cbs.length; i++) {
	                cbs[i].checked = false;
	            }
	            document.getElementById("alls").innerHTML = "全选";
	        }
	    }