JavaScript总结(八)--表单--求值

作者: 风的低语 | 来源:发表于2018-06-20 14:41 被阅读6次

JavaScript总结(八)--表单--求值
JavaScript 表单
[JavaScript] (Day-18) - 操作表单
runoob js第八天
JavaScript 表单验证
JS验证Form表单
JavaScript高级程序设计读书笔记
JavaScript 表单验证
2018-06-02JavaScript撤销表单提交
JavaScript 高级程序设计(第14章表单脚本)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
        </style>
        <script>
            window.onload=function(){
                getSum();
                function getSum(){
                    var tbody=document.getElementsByTagName("tbody")[0];
                var sum=0;
                for(var i=0;i<tbody.children.length;i++){
                    var tr=tbody.children[i];//tr.nodeName带小括号的是属性
                    if(tr.nodeName=="TR"){
                        var td = tr.children;
                        var price = parseInt(td[2].innerText);
                        var count = parseInt(td[3].children[0].value);
                        sum+=price*count;
                        td[3].children[0].onblur=function(){
                            //onchange是发生改变的时候调用
                            //onblur是失去焦点的时候调用
                            getSum();
                        }
                    }
                }
                var tfoot = document.getElementsByTagName("tfoot")[0];//有s的是数组
                //取出tr-->取出td-->将数据放进去
                tfoot.children[0].children[1].innerHTML=sum;
                }
                
                
                document.getElementById("ckAll").onclick=function(){//单击全选则都选中
                    var cks=document.getElementsByName("ck");
                    //cks 点击后是true,未点击是false
                    for(var i=0;i<cks.length;i++){
                        cks[i].checked=this.checked;//如果ckAll单击了,则都被单击
                    }
                }
                var cks=document.getElementsByName("ck");
                for(var i=0;i<cks.length;i++){
                    cks[i].onclick=function(){
                        for(var i=0;i<cks.length;i++){
                            if(!cks[i].checked){
                                document.getElementById("ckAll").checked=false;
                                return;
                            }
                            document.getElementById("ckAll").checked=true;
                        }
                    }
                }

            }
        </script>
    </head>

    <body>
        <table border="1" cellspacing="0"><!--cellspacing 单元格间距-->
            <thead>
            <tr><th>全选<input type="checkbox" id="ckAll"/></th><th>商品</th><th>单价</th><th>数量</th><th></th></tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="ck"/></td>
                    <td><img src="haizeiwang/1.png"/></td>
                    <td>3</td>
                    <td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
                </tr>
                <tr>
                    <td><input type="checkbox" name="ck"/></td>
                    <td><img src="haizeiwang/1.png"/></td>
                    <td>3</td>
                    <td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
                </tr>
                <tr>
                    <td><input type="checkbox" name="ck"/></td>
                    <td><img src="haizeiwang/1.png"/></td>
                    <td>3</td>
                    <td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
                </tr>
                
            </tbody>
            <tfoot>
                <tr><td colspan="3" align="right">总价:</td><td></td></tr>
            </tfoot>
    
        </table>

    </body>

</html>