JavaScript的一道题型

 这道题我觉得考察的知识点蛮多的，就单独拿出来了

    





  

  

    
序号
    
姓名
    
身份证
    
手机号
    
邮箱
    
性别
    
生日
    
功能
  
  

    

      class="xz">1
    
    
李琦
    
130293200301120017
    
19930239423
    
[email protected]
    
male
   
 
    

  
  

    

      class="xz">2
    
    
张三
   
130293200301120017
    
19930239489
    
[email protected]
    
male
    
 
    

  
  

    

      class="xz">3
    
    
李四
    
130293200301120017
    
19930239489
    
[email protected]
    
female
    
 
    

  
  

    

      class="xz">4
    
    
王五
    
130293200301120017
    
19930239489
    
[email protected]
    
male
    
 
    

  
  

    

      class="xz">5
    
    
赵六
    
130293200301120017
    
19930239489
    
[email protected]
    
male
    
 
    

  

下面是运行的效果：

 

看绿色部分，用到了class属性，为什么不用id属性了呢！因为id属性具有唯一性，属性名字不能重复，像这种需要同时作用的，就需要用到class属性，可以管理多个内容，给上面的全选、全不选和反选，各给一个单击事件，事件产生的功能都用到了class属性 ,因为获取到的是多个，所以返回到是一个集合，遍历集合，让checked为true就是选中，false就是不选中，因为操作的是多个，这样是不是就能实现全选、全不选了。至于反选嘛！我们不用把它想的太过复杂，看xz[i].checked=!xz[i].checked;代码，‘！’在js语言中代表非，也就是‘不是’的意思，现在是不是很简单了，就是把不选中的状态给了选中的，就进行了选中和不选中进行了交换，也就实现了反选了。

接下来就剩下两个知识点了，一个是截取，另一个是删除提示功能（没有真正的删除）

看紫色部分，也是用到了class属性，通过substring进行截取拼接，再把重新生成的值赋给原来，看innerText，也可以写成innerHTML，innerText是只操作文本的，innerHTML是操作样式和文本的，因为我们只操作文本，所以用innerText就可以了，还能增加运行速度。

看蓝色部分，我们用到了两个class属性，为什么呢？我们是不是需要通过截取省份证里面的内容，这是第一个class，然后通过截取后的新值，赋值给生日一列，生日一列是第二个class。

看红色部分，我没有用class属性了，因为我们需要通过点击事件，进行弹出选择框，单击事件也是可以作用多个的，方法名一致，然后通过给方法功能（function）就能同时操作多个删除按钮了，通过if(confirm("是否要删除某个数据"))，它默认为true，就是我们鼠标点击确定后，然后弹出警告框提示信息，else则是false，我们点击取消后弹出警告框提示信息。