前端学习笔记-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 = ""
        }
    }
    //倒过来
    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

html:
前端学习笔记-2.5表格的增删改_第1张图片
前端学习笔记-2.5表格的增删改_第2张图片
前端学习笔记-2.5表格的增删改_第3张图片

可以写一下表格的购物车

你可能感兴趣的:(学习笔记)