(Dynamic HTML)--3.使用checkBox模仿购买商品(以及对商品的增删改)

来源：互联网发布：淘宝购物用例图编辑：程序博客网时间：2024/06/06 04:06
正在学习JavaScript的DOM,自己练习做的一个模仿购买商品(以及对商品的增删改)的网站
界面如下:
1.添加商品(格式需要正确)
2.删除所选中的商品(可以多选)
3.修改所选中的商品信息
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="css/table.css"><style type="text/css">.over{background-color: yellow;}</style><script type="text/javascript">var oldClassName;onload=function(){var collItems = document.getElementsByName("item");for(var i=0;i<collItems.length;i++){collItems[i].onclick=subCheck;var oTr=collItems[i].parentElement.parentElement;oTr.onmouseover=function(){oldClassName=this.className;this.className="over";};oTr.onmouseout=function(){this.className=oldClassName;};}var checkAll=document.getElementsByName("all");for(var i=0;i<checkAll.length;i++){checkAll[i].onclick=function(){//为每个全选 选择框 添加点击事件var collItems = document.getElementsByName("item");//设置每个item的checked属性for(var j=0;j<collItems.length;j++){collItems[j].checked=this.checked;}//设置每个checkAll的checked属性for(var j=0;j<checkAll.length;j++){checkAll[j].indeterminate=this.indeterminate;checkAll[j].checked=this.checked;}};}};function selectAll(){//全选 按钮 的按钮点击事件var collItems = document.getElementsByName("item");for(var j=0;j<collItems.length;j++){collItems[j].checked=true;}var checkAll=document.getElementsByName("all");for(var i=0;i<checkAll.length;i++){checkAll[i].indeterminate=false;checkAll[i].checked=true;}}function deleteAll(){//清空 按钮 的按钮点击事件var collItems = document.getElementsByName("item");for(var j=0;j<collItems.length;j++){collItems[j].checked=false;}var checkAll=document.getElementsByName("all");for(var i=0;i<checkAll.length;i++){checkAll[i].indeterminate=false;checkAll[i].checked=false;}}function reversal(){//反选 按钮 的按钮点击事件var collItems = document.getElementsByName("item");for(var j=0;j<collItems.length;j++){collItems[j].checked=!collItems[j].checked;}subCheck();}function subCheck(){var collItems = document.getElementsByName("item");var n=0;for(var i=0;i<collItems.length;i++){if(collItems[i].checked){n++;}}var checkAll=document.getElementsByName("all");if(n>0 && n<collItems.length){//有选中,但是没有全选for(var i=0;i<checkAll.length;i++){// indeterminate 设置或获取用户是否已经更改了复选框的状态。 checkAll[i].indeterminate=true;checkAll[i].checked=false;//}}else{for(var i=0;i<checkAll.length;i++){checkAll[i].indeterminate=false;//该属性必须设置为false,下面的设置才有效}if(n==0){for(var i=0;i<checkAll.length;i++){checkAll[i].checked=false;}}else{for(var i=0;i<checkAll.length;i++){checkAll[i].checked=true;}}}}function sum(){//获取所有name属性为"item"的标签,判断它的checked属性,若为true表示选中var collItems=document.getElementsByName("item");var sum=0;for(var i=0;i<collItems.length;i++){if(collItems[i].checked){sum+=parseFloat( collItems[i].value );//把所有选中的 value值累加起来}}var sumItem=document.getElementById("sumId");sumItem.innerHTML=(sum+"元").fontcolor("red");}var flag=true;//flag--true:表示从小到大排序var isSorted=false;function sortTable(obj){//事件--价格排序 isSorted=true;var tableNode=document.getElementById("table1");var oTrs=tableNode.rows;//这里注意,要排序的只有有价格的行var items=[];for(var i=1;i<oTrs.length-2;i++){items[i-1]=oTrs[i];}//对items排序for(var i=0;i<items.length-1;i++){for(var j=i+1;j<items.length;j++){//alert("i:"+i);//alert("j:"+j);var priceValueNode=items[i].cells[2];var value=parseInt( priceValueNode.innerText );//得到商品价格var priceValueNode2=items[j].cells[2];var value2=parseInt( priceValueNode2.innerText );//得到商品价格//alert(value+","+value2);if(value2<value){//节点交换//alert(value+","+value2);var temp=items[i];items[i]=items[j];items[j]=temp;}}}//1.先把title加入到table中//var tableTitle=document.getElementById("tableTitle");//tableNode.appendChild(tableTitle);//2.在依次把排序后的每一行加入到table中if(flag){for(var i=0;i<items.length;i++){tableNode.appendChild(items[i]);var priceValueNode=items[i].cells[2];var value=parseFloat( priceValueNode.innerText );//得到商品价格//alert(value);}obj.innerText="价格▽";}else{for(var i=items.length-1;i>=0;i--){tableNode.appendChild(items[i]);}obj.innerHTML="价格△";}//3.把工具行 和 结果行 加入到table中var tableTools=document.getElementById("tableTools");tableNode.appendChild(tableTools);var result=document.getElementById("result");tableNode.appendChild(result);flag=!flag;}function deleteItem(){var tableNode=document.getElementById("table1");var collRows=tableNode.rows;var n=0;for(var i=0;i<collRows.length;i++){if(collRows[i].cells[0].childNodes[0].checked){n++;}}if(n==0){alert("请选择需要删除的元素");return;}var boo=window.confirm("你确认要删除选中元素么?");if(boo){for(var i=0;i<collRows.length;i++){if(collRows[i].cells[0].childNodes[0].checked){tableNode.deleteRow(i);i--;}}subCheck();}}</script></head><body><table id="table1" style="float: left;"><tr id="tableTitle"> <th><input type="checkbox" name="all" value="5000"/>全选</th> <th>商品</th> <th onclick="sortTable(this);">价格</th> </tr><tr> <td><input type="checkbox" name="item" value="5000"/></td> <td>电脑</td> <td>5000</td> </tr><tr> <td><input type="checkbox" name="item" value="2000"/></td> <td>手机</td> <td>2000</td> </tr><tr> <td><input type="checkbox" name="item" value="3000"/></td> <td>手表</td> <td>3000</td> </tr><tr> <td><input type="checkbox" name="item" value="500"/></td>  <td>皮带</td> <td>500</td> </tr><tr> <td><input type="checkbox" name="item" value="1000"/></td> <td>鞋子</td> <td>1000</td> </tr><tr id="tableTools"> <td><input type="checkbox" name="all" value="5000"/>全选</td><td colspan="2"><input type="button" value="全选" onclick="selectAll();"><input type="button" value="清空" onclick="deleteAll();"><input type="button" value="反选" onclick="reversal();"><input type="button" value="删除" onclick="deleteItem();"><input type="button" value="修改" onclick="updateItem();"></td></tr><tr id="result"> <td><input type="button" value="结算" onclick="sum();"></td> <td colspan="2"><span id="sumId"></span></td> </tr></table><br><br><br><div style="margin-left:600px; border: 1px solid; width: 200px;"><h2>添加商品信息</h2>商品:<input type="text" id="goodsName"><br>价格:<input type="text" id="goodsPrice" onblur="checkError('goodsPrice','errorInfo1');" onfocus="clearError('errorInfo1');"><span id="errorInfo1"></span><br><br><input type="button" value="添加" onclick="addItem('goodsName','goodsPrice');" style="font-size: 15pt; margin-left: 80px;"></div><script type="text/javascript">function addItem(goodsNameValue,goodsPriceValue){var boo=checkError(goodsPriceValue,"errorInfo1");if(boo){//当输入信息格式正确时,才添加！//创建需要的元素var goodsName=document.getElementById(goodsNameValue);var goodsPrice=document.getElementById(goodsPriceValue);var oTr = document.createElement("tr");var oTd1 = document.createElement("td");var chkBox=document.createElement("input");var oTd2 = document.createElement("td");var oTd3 = document.createElement("td");//设置元素属性chkBox.type="checkbox";chkBox.name="item";chkBox.value=parseFloat( goodsPrice.value );//经过测试  ：要拿到input 文本框中的值  要用value属性oTd2.innerText=goodsName.value;oTd3.innerText=goodsPrice.value;//元素父子关系oTd1.appendChild(chkBox);oTr.appendChild(oTd1);oTr.appendChild(oTd2);oTr.appendChild(oTd3);//元素的事件chkBox.onclick=subCheck;oTr.onmouseover=function(){oldClassName=this.className;this.className="over";};oTr.onmouseout=function(){this.className=oldClassName;};//把添加的一行Tr加入到表格中//在加入之前,先判断一下,原本表格的全选状态var checkAll=document.getElementsByName("all");if(checkAll[0].checked){//如果是全选,则设置为false,因为新加入的还未选择checkAll[0].indeterminate=true;checkAll[1].indeterminate=true;checkAll[0].checked=false;checkAll[1].checked=false;}var tableNode=document.getElementById("table1");tableNode.appendChild(oTr);var tableTools=document.getElementById("tableTools");tableNode.appendChild(tableTools);var result=document.getElementById("result");tableNode.appendChild(result);}}function checkError(goodsPriceValue,errorInfoValue){var goodsPrice=document.getElementById(goodsPriceValue);var sPrice=goodsPrice.value;var price=parseFloat( sPrice );if(isNaN(price)){var errorInfo=document.getElementById(errorInfoValue);errorInfo.innerHTML=("价格格式输入错误:"+sPrice+".请输入小数,或整数").fontcolor("red");return false;}return true;}function clearError(errorInfo1Value){var errorInfo=document.getElementById(errorInfo1Value);errorInfo.innerText="";}</script><div style="margin-top: 100px; border: 1px solid; width: 200px;"><h2>修改商品信息</h2>商品:<input type="text" id="goodsName2"><br>价格:<input type="text" id="goodsPrice2" onblur="checkError('goodsPrice2','errorInfo2');" onfocus="clearError('errorInfo2');"><span id="errorInfo2"></span><br><br><input type="button" value="确认修改" onclick="update();" style="font-size: 15pt; margin-left: 50px;"></div><script type="text/javascript">function updateItem(){var items=document.getElementsByName("item");var n=0;var selectedItem=null;for(var i=0;i<items.length;i++){if(items[i].checked){n++;selectedItem=items[i];}}if(n==0){alert("请选择需要修改的内容");return;}if(n==1){//当只选中一个时,把选中的内容显示var goodsName2=document.getElementById("goodsName2");var goodsPrice2=document.getElementById("goodsPrice2");var oTr=selectedItem.parentElement.parentElement;//得到选中的那一行goodsName2.value=oTr.cells[1].innerHTML;goodsPrice2.value=oTr.cells[2].innerHTML;}}function update(){//deleteItem();可以直接调用次函数,可是会弹出提示信息"你确认要删除选中元素么?"var boo=window.confirm("你确认要修改选中元素么?");if(!boo){return;}//先删除var tableNode=document.getElementById("table1");var collRows=tableNode.rows;for(var i=0;i<collRows.length;i++){if(collRows[i].cells[0].childNodes[0].checked){tableNode.deleteRow(i);i--;}}subCheck();//在添加addItem("goodsName2", "goodsPrice2");}</script></body></html>
阅读全文
1 0