前端学习笔记-2.5表格的增删改

表格的基础操作，修改数量，删除，复制行等
css:

    body{text-align: center;}
    #ta{margin:auto;}
    #ta tr{height:35px;}

js:

    //声明删除行
    function delRow(btn){
        //获取table
        var ta = document.getElementById("ta");
        //获取要删除的行元素
        var tr = btn.parentNode.parentNode;
        //删除行
        ta.deleteRow(tr.rowIndex);
    }
    //修改功能
    function updateRow(btn){
        //获取单元格对象
        var tr = btn.parentNode.parentNode;
        //获取列
        var cell = tr.cells[3];
        //判断cell.innerHTML是否是数字
        if(!isNaN(Number(cell.innerHTML))){
            cell.innerHTML = "<input type='text' value='"+cell.innerHTML+"' onblur='updateRow2(this)'/>"
        }
    }
    //倒过来
    function updateRow2(inp){
        //获取列对象
        var cell = inp.parentNode;
        //实现保存
        cell.innerHTML = inp.value;
    }
    //选择删除
    function chooseDel(){
        //获取表格对象、
        var ta = document.getElementById("ta");
        //获取要删除的行号
        var chks = document.getElementsByName("chk");
        for(var i=1;i<chks.length;i++){
            if(chks[i].checked){
                //删除行
                ta.deleteRow(i);
                i--;
            }
        }
    }
    //添加行
    function addRow(){
        //获取tab对象
        var ta = document.getElementById("ta");
        //添加行
        var tr = ta.insertRow(1);
        //添加单元格
        var cell0 = tr.insertCell(0);
        cell0.innerHTML = "<input type='checkbox' name='chk' />";
        var cell1 = tr.insertCell(1);
        cell1.innerHTML = document.getElementById("uname").value;
        var cell2 = tr.insertCell(2);
        cell2.innerHTML = "张三";
        var cell3 = tr.insertCell(3);
        cell3.innerHTML = "49.88";
        var cell4 = tr.insertCell(4);
        cell4.innerHTML = "5";
        var cell5 = tr.insertCell(5);
        cell5.innerHTML = "<input type='button' value='修改数量' onclick='updateRow(this)'/><input type='button' value='删除' onclick='delRow(this)'/>"
    }
    //复制行
    function copyRow(){
        //获取表格对象
        var ta = document.getElementById("ta");
        //获取选择行元素
        var chks = document.getElementsByName("chk");
        for(var i=0;i<chks.length;i++) {
            if (chks[i].checked) {
                var tr = ta.insertRow(ta.rows.length);
                //复制行
                tr.innerHTML = ta.rows[i].innerHTML;
            }
        }
    }
    //全选
    function chooseAll(){
        var ck = document.getElementById("ck");
        var chks = document.getElementsByName("chk");
        if(ck.checked){
            for(var i=0;i<chks.length;i++){
                chks[i].checked = true;
            }
        }else{
            for(var i=0;i<chks.length;i++){
                chks[i].checked = false;
            }
        }
    }
    //隔行变色
    function operCss(){
        //获取所有的行对象数组
        var trs = document.getElementById("ta").rows;
        //遍历
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.backgroundColor = "red";
            }else{
                trs[i].style.backgroundColor = "green";
            }
        }
    }

html:

可以写一下表格的购物车