表格，输入框的回顾

一.表格：

1.当对于表格添加边框(如:border: 1px solid black;)后根据表格的默认样式会呈现如下图所示：

单元格之间会存在空隙，但是由于每个人的审美风格不同，有的就会想要去掉空隙。实现这一效果两种方式可以用 。方法一：css消除表格间隙的方式 ；方法二：html消除表格间隙的方式：cellspacing是边框与边框之间的间隙大小，设置为0则表示单元格之间的距离为0。

    /* 方法一：css消除表格间隙的方式 */
    table{
    border-collapse: collapse;
    }

 <!-- 方法二：html消除表格间隙的方式：cellspacing是边框与边框之间的间隙大小，设置为0则表示单元格之间的距离为0 -->
    <table cellspacing="0">

效果图：

 2.：批量删除表格：

当利用复选框和删除单个数据的接口实现批量删除的时候，要注意通过对前面的复选框的状态进行判断该行表格是否需要被删除，具体的js代码如下：

        //全选复选框的id值
        let gou = document.getElementById("gou")
        //tbody里的复选框
        let xuan = document.getElementsByClassName("box")
        //删除按钮
        let del=document.getElementById("del")
        gou.onclick = function () {
            if (gou.checked) {
                for (let i = 0; i < xuan.length; i++) {
                    xuan[i].checked = "true"
                }
            }else{alert("222")
                for (let j = 0; j < xuan.length; j++) {
                    xuan[j].checked=gou.checked
                }
            }
        }
        
        for (let j = 0; j < xuan.length; j++) {
            xuan[j].onclick=function(){
                if(!xuan[j].checked){
                    gou.checked=xuan[j].checked//明确全选框当前的状态
                }

            }
        }
        del.onclick=function(){
            for(let k=0;k<xuan.length;k++){
            if(xuan[k].checked){
            console.log(xuan[0].parentNode.parentNode);
            //删除当前行,他的下一行移到了当前的位置,但是k++之后,不会再走到这一行
            xuan[k].parentNode.parentNode.remove();
            //使用k-- 在退回到这一行做一次判断
            k--;
            
            }
            }
        }

效果图：（有k--）

 

在这个里面k--不要去掉否则会产生想要删除所有的表格却只删除一半：

效果图：（未完全删除）

 二.输入框：

1.如何让input变成只读模式不可编辑

 方法 一 : readonly 规定输入字段为只读可复制

  <input type="text" value="hello JavaScript" readonly="readonly">

 方法 二 : disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色

 

 <input type="text" value="hello JavaScript" disabled="disabled">

 方法 三 : 通过控制input的max length为0实现

  <input type="text" maxlength="0">

方法 四 : οnfοcus="this.blur();“onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()”，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了

   

 <input type="text" value="hello JavaScript" οnfοcus="this.blur();">