✽js的快速入门4 表格的操作

目录

删除对应的行

更改数量

隔行变色

全选框 

删除行

添加行

复制行

HTML和css

表格的增删均要从父节点开始比较特殊

最终实现的样子

 body中的HTML代码在最后面，其余均在script中【javascript】

table一般用来展示数据库中的数据，对应数据库中的表，所以具体有多少行不可知，但根据表头可知有多少列。

所以不采取id，class等来获取表格元素，而是采用父节点，子节点的特性进行增删【增删一行】【table只有一个】

同样，获取td中的未知input也不使用id，而是在input框使用的时候传递关键字 this ，代表传递对应的元素对象

删除对应的行

input框中的函数带有关键字this，所以在delrow函数中的形参btn是对应的点击的input框

利用到了前面说过的增添节点；

获取input的父节点(td)，在获取td的父节点(tr)，得到了一行，再利用tr的父节点(table)删除tr即可

【table中的tr是有标号的，从上至下为0-n】

【table.deleteRow函数为删除tabel的某行；tr.rowIndex得到tr所在的标号】

function delrow(btn){
            var ptab=document.getElementById('tab'); // 获取表格的对象
            var tr=btn.parentNode.parentNode;   //获取该输入框的父节点的父节点（tr）
            ptab.deleteRow(tr.rowIndex);// tr的行标
        }

更改数量

tr下分为td,每个td也是有标号的【从左至右为0-n】

获取该单元格的对象后，更改本文为文本框【如果输入框内的是非数字则不执行更改】

并搭配第二个函数，将文本框改回文本

function update(btn){
            // 获取单元格对象
            var tr=btn.parentNode.parentNode;
            var cell=tr.cells[4]; // 返回此行对象的单元格数组

            if(!isNaN(Number(cell.innerHTML))){
                cell.innerHTML=''
            }
        }
function update2(inp){
           var cell=inp.parentNode;
            //存储
            cell.innerHTML=inp.value;
        }

隔行变色

打开该页面时就需要看见隔行变色，所以该函数要加再body上，加载就运行

获取table.rows为数组【存储了行号】

对行号除以2，区分出奇数行与偶数行，再分别设置背景色即可

function changecolor(){
            // 获取角标对其%2
            var trs=document.getElementById('tab').rows;
            for(var i=0;i

然后给每个函数的后面均加上该函数，使得不管进行什么操作结束后都是隔行变色

全选框 

该框位于表头，为其设置id，获取其checked值(true,false)，

用name获取多选框【返回的是数组】,

选中为true，循环更改所有checked结果，反之取消所有

// 全选
function chooseall(){
            var chall=document.getElementById('all').checked;
            console.log(chall);
            var chks=document.getElementsByName('chk');
            if(chall){
                for(var i=0;i

删除行

获取父节点(table)和所有的多选框，倒序遍历多选框，checked为true时进行删除

【0为标题行，所以对其要进行越过】

【正序选中多个，删除上一个后面的标号会前移，造成越过的现象(删除1，2行时，第一行删除后，第二行自行向前补齐形成新的1，而此时的遍历条件i已经来到了2，所以造成了漏删)】

function choosedel(){
            var tab=document.getElementById('tab');
            var chks=document.getElementsByName('chk');
            for(var i=chks.length-1 ; i>0 ; i--){
                if(chks[i].checked){
                console.log('行号'+i);
                tab.deleteRow(i);//删除行,增删行号会向前挪，挪了之后并的就不能删除
                }
            }
            changecolor();
        }

添加行

先申请出要插入的位置【父节点增加一个子节点,(在1行插入)原本的1行会变成2行，以此向后推】

获取前面四个输入框的内容填入字符【形成innerHTML】

申请出来的空间，向中补入innerHTML

function addrow(){//没有传值
            // console.log(document.getElementById('uname').value);
            var tab=document.getElementById('tab');
            var tr=tab.insertRow(1); //头插
            var trl=''+
                        ''+
                        ''+document.getElementById('uname').value+''+
                        ''+document.getElementById('ahor').value+''+
                        ''+document.getElementById('price').value+''+
                        ''+document.getElementById('num').value+''+
                        ''+
                            ''+
                            ''+
                        ''+
                    ''
        tr.innerHTML=trl;
        changecolor();
        }

复制行

 同样的获取父节点(table)，由父节点(table)对子节点(tr)进行尾插

 获取多选框的数组，进行遍历

对选中的进行尾插【申请空间再插入innerHTML】

// 复制行
        function copyrow(){
            var tab=document.getElementById('tab');

            var chks=document.getElementsByName('chk');
            for(var i=0;i

HTML和css

#tab tr{
            height: 35px;
        }
.cap1{
            width: 200px;
        }
.cap2{
            width: 100px;
        }
td:last-child{
            text-align: center;
        }

    
操作表格
    
    
    
    书名：
    作者：
    价格:
    数量:
    

    
    

        

            

            
书名
            
作者
            
价格
            
数量
            
操作
        
        

            

            
java
            
作者1
            
43.50
            
3
            

                
                
            
        
        

            

            
js入门
            
作者2
            
70.60
            
2
            

                
                
            
        
        

            

            
springboot
            
作者3
            
68.43
            
4
            

                
                
            
        
        

            

            
python
            
作者4
            
68.43
            
4
            

                
                
            
        
    

下节为window对象