DOM练习二

最新推荐文章于 2024-08-18 10:54:05 发布

菜鸟小黑成长史

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量134

点赞数

分类专栏： JavaScript练习文章标签： javascript js css html dom

本文链接：https://blog.csdn.net/cainiaoqifeiji/article/details/105980772

版权

JavaScript练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求：

鼠标浮动高亮
全选全否任意选择正常，并在显示太正确输出
提交功能正常，提交到表格第一行
单个删除与全部删除正常

在这里插入图片描述
table.html

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>table</title>
    <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
    <div class="center">
    <p><button id='delAll'>删除</button></p>
    <table id='tagTable' class='gridtable'>
    <thead>
        <tr>
           <th><input type="checkbox" id="allcheck"/></th>
           <th>元素名称</th>
           <th>功能</th>
           <th>操作</th>
       </tr>
   </thead>
   <tbody id='tb'>
       <tr id='1'>
          <td><input type="checkbox" value="1"/></td>
          <td>head</td>
          <td>首元素</td>
          <td><input type="button"  value="删除"/></td>
       </tr>
       <tr id='2'>
         <td><input type="checkbox" value="2"/></td>
         <td>body</td>
         <td>主题元素</td>
         <td><input type="button"  value="删除"/></td>
      </tr>
      <tr id='3'>
         <td><input type="checkbox" value="3"/></td>
         <td>title</td>
         <td>标题</td>
         <td><input type="button"  value="删除"/></td>
     </tr>
     <tr id='4'>
         <td><input type="checkbox" value="4"/></td>
         <td>script</td>
         <td>脚本</td>
         <td><input type="button" value="删除"/></td>
    </tr>
    </tbody>
</table><br>

<table class="gridtable">
   <tr>
      <td>名称</td>
   </tr>
   <tr>
      <td><input type="text" id="tagName" /></td>
   </tr>
   <tr>
      <td>功能</td>
   </tr>
   <tr>
      <td><input type="text" id="tagFunc" /></td>
   </tr>
   <tr>
      <td><input type="button" id="submit" value="提交"></td>
   </tr>
  </table>
  </div>
  
 </body>
 <script type="text/javascript" src="script.js"></script>
</html>

style.css

.center{
 text-align: center;
 width:100%;
}
table.gridtable {  
    font-family: verdana,arial,sans-serif;  
    font-size:11px;  
    color:#333333;  
    border-bottom-width: 1px;  
    border-bottom-color: #666666;  
    border-collapse: collapse;  
 margin: auto;
}  
table.gridtable th {  
    border-bottom-width: 1px;  
    padding: 8px;  
    border-bottom-style: solid;  
    border-bottom-color: #666666;  
    background-color: #dedede;  
}  
table.gridtable tr {  
    border-bottom-width: 1px;  
    padding: 8px;  
    border-bottom-style: solid;  
    border--bottom-color: #666666;  
    background-color: #ffffff;  
}

script.js

(function() {
    //整体表格对象
    let tagTable=document.getElementById('tagTable');
    //表body
    let tb=document.getElementById('tb');
    //除表头外的所有行
    let trs = tb.children;
    //表头全选
    let allcheck = document.getElementById('allcheck');
    //所有input标签
    let inputs = document.getElementsByTagName('input');
 
    //除表头外所有的checkbox
    let checks = [];
    //被选中的checkbox的值
    let checkedIds = [];
 
    //最上面的全部删除按钮
    let delAll=document.getElementById('delAll');
    //提交
    let submit=document.getElementById('submit');
    //当前最大的id
    let maxId=4;
 
 
 //得到除表头外的所有checkbox
 for(let i=0;i<inputs.length;i++){
  if(inputs[i].type=='checkbox'&&inputs[i].id!='allcheck'){
   checks.push(inputs[i]);
  }
 }


 /**
  * 在checkedIds中删除和element.value一致的值
  * element是形参，只是被传递的值
  */
 //为后面新添加行增加任意选择功能：checkRow和uncheck配套使用
 let checkRow=function(element){
     if(element.checked){
         checkedIds.push(element.value);
      if(checkedIds.length==checks.length){
          allcheck.checked='checked';
      }
     }else{
      //修改全选状态
      allcheck.checked='';
      //修改最终数据结构
      uncheck(element);
     }
     checkedIds.sort();
     console.log(checkedIds);
 }
    let uncheck=function(element){
     for(let i in checkedIds){
         if(element.value==checkedIds[i]){
             checkedIds.splice(i,1);
   }
  }
 }
 
 
 //最开始表格的任意选择
 for(let i in checks){
     checks[i].addEventListener('click',function(e){
     checkRow(this);
  },false)
 }
 
 
 //全选与全否
 allcheck.addEventListener('click',function(e){
     checkedIds=[];
     if(allcheck.checked){
         for(let i in checks){
             checks[i].checked='checked';
             checkedIds.push(checks[i].value);
      }
    }else{
    for(let i in checks){
       checks[i].checked='';
    }
      checkedIds=[];
     }
     console.log(checkedIds);
  
 },false);
 
 //从checkbox列表中删除选中是行,traget只是形参
 let removeCheck=function(traget){
     for(let i in checks){
      if(checks[i]==traget){//首先选出是哪个要被删除
          uncheck(checks[i]);//取消选择标识，从已经被选中的数组checkId中删除该项
          checks.splice(i,1);//删除该行
          break;//跳出循环
   }
  }
 }
 
 //删除按钮的功能
 let delRow=function(row){
      if(confirm('确定要删除吗')){
       //row指的是tr
       //row(看submit监听事件)row.firstElementChild指的是td
       //row.firstElementChild.firstElementChild指的是checkbox
       removeCheck(row.firstElementChild.firstElementChild);
       tb.removeChild(row);
       }
       console.log(checkedIds);
 }
 
 //删除信息（全部）
 delAll.addEventListener('click',function(e){
  if(confirm('确定要全部删除吗？')){
   //----------??为什么不能直接循环删除checkedIds中的内容
   //原因：是为了保持checkedIds中的内容不变，不然下面的循环会改变checkedIds中的内容，导致结果出错
   //目前不确定，若果有其他答案了再改
   let lemp=checkedIds.slice();
   for(let j in lemp){
    let row=document.getElementById(lemp[j]);
    removeCheck(row.firstElementChild.firstElementChild);
    tb.removeChild(row);
   }
  }
  console.log(checkedIds);
 },false);
 
 //鼠标掠过高亮
 let highlight=function(row){
      row.addEventListener('mouseover',function(e){
         this.style.background = 'aliceblue';
     },false);
     row.addEventListener('mouseout',function(e){
         this.style.background = '#FFFFFF';
     },false);
  }
 
 //鼠标掠过高亮，为已经添加的删除按钮添加删除事件
 for(let i=0;i<trs.length;i++){
     highlight(trs[i]);
     //trs[i].lastElementChild.firstElementChild==button
     trs[i].lastElementChild.firstElementChild.addEventListener('click',function(e){
      //delRow(this.parentNode.parentNode==tr
      delRow(this.parentNode.parentNode);
     },false);
  
 }
 
 //提交
 submit.addEventListener('click',function(e){
     //名称
      let tagName=document.getElementById('tagName').value;
      //功能
      let tagFunc=document.getElementById('tagFunc').value;
      if(tagName!=''&&tagFunc!=''){
           allcheck.checked='';
           maxId++;
           //创建新的元素节点----checkbox部分
           let newCheck=document.createElement('input');
           newCheck.setAttribute('type','checkbox');
           newCheck.setAttribute('value',maxId);
           newCheck.addEventListener('click',function(e){
            //为新添加的行添加选择的功能
            checkRow(this);
           },false);
           checks.push(newCheck);
           
           //在表格的第一行插入
           let row=tb.insertRow(0);
           row.setAttribute('id',maxId);
           //在插入的第一行中插入列
           let cell1=row.insertCell();
           cell1.appendChild(newCheck);
           let cell2=row.insertCell();
           cell2.innerHTML=tagName;
           let cell3=row.insertCell();
           cell3.innerHTML=tagFunc;
           let cell4=row.insertCell();
           //创建新的元素节点----删除的button部分
           let del=document.createElement('input');
           del.setAttribute('type','button');
           del.setAttribute('value','删除');
           del.addEventListener('click',function(e){
            delRow(row);//为新创建的这一行添加删除的功能
           },false);
           cell4.appendChild(del);
           highlight(row);//为新创建的这一行添加高亮的功能
    
     }else{
           alert('请补全输入框中的内容')
     }
     
  document.getElementById('tagName').value ="";
  document.getElementById('tagFunc').value="";
  },false);
  })();