ACCP6.0第九章练习

//根据标签ID获取值
function $(id)
{
    return document.getElementById(id);
}
//全局变量
var inputs = document.getElementsByTagName("input");
//初始化数量和Checkbox状态，默认为0和全选
function init()
{
    $("jifen").textContent = 0;
    $("price").textContent = 0;
    for(var i=0;i<inputs.length;i++)
    {
        if(inputs[i].type == "text")
        {
            inputs[i].value=1;
            initPrice(inputs[i].parentNode.parentNode);
        }
        if(inputs[i].type == "checkbox")
        {
            inputs[i].checked=true;
        }
    }
}
//增加和删除数量
function change(item)
{
    if(item.value == "+")
    {
         item.parentNode.childNodes[1].value = parseInt( item.parentNode.childNodes[1].value) +1; 
         calPrice(item.parentNode.parentNode,"+");
         return;
   }
   if(item.value == "-")
   {
        if(parseInt( item.parentNode.childNodes[1].value) <= 0)
        {
            alert(">=0");
            return;
        }
         item.parentNode.childNodes[1].value = parseInt( item.parentNode.childNodes[1].value) -1;
         calPrice(item.parentNode.parentNode,"-");
         return;
   }
}
//计算加载页面时的价格
function initPrice(item)
{
    var p = parseInt(item.childNodes[3].textContent);
    item.childNodes[5].textContent = p;
    //计算价格和积分
    var jifen = parseInt($("jifen").textContent) + parseInt(item.childNodes[2].textContent);
    $("jifen").textContent = jifen;
    var price = parseInt($("price").textContent) + parseInt(item.childNodes[3].textContent);
    $("price").textContent = price;
}
//根据数量的改变，实时改变价格和积分
function calPrice(item,item2)
{
   //alert(item.childNodes[2].textContent);
   //IE浏览器使用innerText属性，因测试环境是Chrome浏览器，故未曾考虑兼容性
    var p;
    var jifen;
    var price;
   switch(item2)
   {
        case "+":
            //计算当前行价格
            p = parseInt(item.childNodes[3].textContent) + parseInt(item.childNodes[5].textContent);
            //计算价格和积分
            jifen = parseInt($("jifen").textContent) + parseInt(item.childNodes[2].textContent);
            price = parseInt($("price").textContent) + parseInt(item.childNodes[3].textContent);
            break;
        case "-":
            //计算当前行价格
            p = parseInt(item.childNodes[5].textContent) - parseInt(item.childNodes[3].textContent);
            //计算价格和积分
            jifen = parseInt($("jifen").textContent) - parseInt(item.childNodes[2].textContent);
            price = parseInt($("price").textContent) - parseInt(item.childNodes[3].textContent);
            break;
   }
    item.childNodes[5].textContent = p;
    $("jifen").textContent = jifen;
    $("price").textContent = price;
}
//实现全选和反选功能
function selectAll()
{   
   if( $("sa").checked == true)
    {      
        for(var i=0;i<inputs.length;i++)
        {
            if(inputs[i].type == "checkbox")
            {
                inputs[i].checked=true;
            }
        }  
    }
    else
    {
        for(var i=0;i<inputs.length;i++)
        {
            if(inputs[i].type == "checkbox")
            {
                inputs[i].checked=false;
            }
        }  
    }
}
//当任意一个反选是，取消全选，反之，亦然
function changeStatus()
{
    $("sa").checked = true;
    for(var i=0;i<inputs.length;i++)
    {
        if(inputs[i].type == "checkbox")
        {
            if(inputs[i].checked == false)
            {
                $("sa").checked = false;
            }
        }
    } 
}
//实现删除功能，每列最后的删除功能
function deleteRow(item)
{
    var t = item.parentNode.parentNode;
    var i = t.rowIndex;
    //IE浏览器使用innerText属性，因测试环境是Chrome浏览器，故未曾考虑兼容性
    //计算价格和积分
    var jifen = parseInt($("jifen").textContent) - (parseInt(t.childNodes[4].childNodes[1].value) *  parseInt(t.childNodes[2].textContent));
    $("jifen").textContent = jifen;
    var price = parseInt($("price").textContent) - parseInt(t.childNodes[5].textContent);
    $("price").textContent = price;      
    $("t1").deleteRow(i);
    $("t1").deleteRow(i-1); 
}
//删除按钮功能的实现
function deleteC()
{
    for(var i=inputs.length-1;i>0;i--)
    {
        if(i != 0 && inputs[i].type == "checkbox")
        {
            if(inputs[i].checked==true)
            {
                deleteRow(inputs[i]);
             }
        }
    } 
    $("sa").checked = false;    
}
window.onload=init;

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        img
        {
            vertical-align:middle;
         }
        tbody td
        {
            text-align: center;
        }
        span
        {
            color: Red;
        }
        input[type="text"]
        {
            width: 20px;
            text-align: center;
        }
    </style>
     <script type="text/javascript"src="JScript.js"></script> 
</head>
<body>
<table id="t1" border="1" cellpadding="0" cellspacing="0" width="700px">
<thead>
    <tr><td style="30px;"><input type="checkbox" id="sa" checked ="checked" onclick="selectAll();"/></td><td style="auto;">店铺宝贝</td><td style="80px;">获积分</td><td style="100px;">单价(元)</td><td style="80px;">数量</td><td style="80px;">小记(元)</td><td style="50px;">操作</td></tr>
</thead>
<tbody>
<tr align="left"><td align="left" colspan="7">123</td></tr>
<tr><td><input type="checkbox" onclick="changeStatus();" /></td><td><img src="" alt="Pic1" />des</td><td>5</td><td>138.00</td><td><input type="button" value="-"onclick="change(this)" /><input type="text" readonly="readonly" /><input type="button"  value="+" onclick="change(this)" /></td><td>138</td><td><span onclick="deleteRow(this)">删除</span></td></tr>
<tr><td colspan="7">123</td></tr>
<tr><td><input type="checkbox" onclick="changeStatus();"  /></td><td><img src="" alt="Pic1" />des</td><td>12</td><td>265.00</td><td><input type="button" value="-" onclick="change(this)"/><input type="text" readonly="readonly"  /><input type="button" value="+" onclick="change(this)" /></td><td>138</td><td><span onclick="deleteRow(this)">删除</span></td></tr>
<tr><td colspan="7">123</td></tr>
<tr><td><input type="checkbox" onclick="changeStatus();"  /></td><td><img src="" alt="Pic1" />des</td><td>3</td><td>85.00</td><td><input type="button" value="-" onclick="change(this)" /><input type="text" readonly="readonly"  /><input type="button" value="+"  onclick="change(this)" /></td><td>138</td><td><span onclick="deleteRow(this)">删除</span></td></tr>
<tr><td colspan="7">123</td></tr>
<tr><td><input type="checkbox" onclick="changeStatus();"  /></td><td><img src="" alt="Pic1" />des</td><td>12</td><td>12.00</td><td><input type="button" value="-" onclick="change(this)" /><input type="text" readonly="readonly" /><input type="button" value="+"  onclick="change(this)"/></td><td>138</td><td><span onclick="deleteRow(this)">删除</span></td></tr>
</tbody>
<tfoot>
<tr><td colspan="7" align="right">商品总价(不含运费)：<span id="price"></span>元</td></tr>
<tr><td><input type="button" value="删除所选" onclick="deleteC()" /></td><td colspan="6" align="right">可获积分<span id="jifen"></span>点</td></tr>
<tr><td colspan="7" align="right"><input type="button" value="立即购买" /></td></tr>
</tfoot>
</table>
</body>
</html>