正在學習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;
οnlοad=function(){
var collItems = document.getElementsByName("item");
for(var i=0;i<collItems.length;i++){
collItems[i].οnclick=subCheck;
var oTr=collItems[i].parentElement.parentElement;
oTr.οnmοuseοver=function(){
oldClassName=this.className;
this.className="over";
};
oTr.οnmοuseοut=function(){
this.className=oldClassName;
};
}
var checkAll=document.getElementsByName("all");
for(var i=0;i<checkAll.length;i++){
checkAll[i].οnclick=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 οnclick="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="全選" οnclick="selectAll();">
<input type="button" value="清空" οnclick="deleteAll();">
<input type="button" value="反選" οnclick="reversal();">
<input type="button" value="刪除" οnclick="deleteItem();">
<input type="button" value="修改" οnclick="updateItem();">
</td>
</tr>
<tr id="result"> <td><input type="button" value="結算" οnclick="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" οnblur="checkError('goodsPrice','errorInfo1');" οnfοcus="clearError('errorInfo1');"> <span id="errorInfo1"></span><br>
<br>
<input type="button" value="添加" οnclick="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.οnclick=subCheck;
oTr.οnmοuseοver=function(){
oldClassName=this.className;
this.className="over";
};
oTr.οnmοuseοut=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" οnblur="checkError('goodsPrice2','errorInfo2');" οnfοcus="clearError('errorInfo2');"> <span id="errorInfo2"></span><br>
<br>
<input type="button" value="確認修改" οnclick="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>