JS项目合集-DOM相关操作

最新推荐文章于 2022-07-29 08:30:00 发布

莉亚小屋

最新推荐文章于 2022-07-29 08:30:00 发布

阅读量245

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/corneliawang/article/details/106954355

版权

web 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

JS项目合集-DOM相关操作

题目来源：B站视频JS从入门到精通

1.插入元素

题目描述

点击按钮将文本框中的输入内容插入到第一行中
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   window.onload=function(){
    var otext=document.getElementById("txt");
    var oul=document.getElementById("ul1");
    var obut=document.getElementById("button1");
    obut.onclick=function(){
    var ali=document.getElementsByTagName("li");
    var oli=document.createElement("li");
    oli.innerHTML=otext.value;
    if (ali.length>0){
     oul.insertBefore(oli,ali[0]);
     }
    else{
     oul.appendChild(oli);
    };
    };
   }
  </script>
 </head>
 <body>
  <input id="txt" type="text"/>
  <input id="button1" type="button" value="创建行"/>
  <ul id="ul1">
  </ul>
 </body>
</html>

当行数为零时，insertbefore兼容性不好，此时的appendChild的功能效果是一样的。

2.表格隔行变色

题目描述

建立表格，通过JS建立隔行变色样式，并使得鼠标移入移出时对应行高亮。
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   window.onload=function(){
    var otable=document.getElementById('tab1');
    var oldColor="";
    for (var i=0;i<otable.tBodies[0].rows.length;i++){
     otable.tBodies[0].rows[i].onmouseover=function(){
      oldColor=this.style.background;
      this.style.background="yellow";
     }
     otable.tBodies[0].rows[i].onmouseout=function(){
      this.style.background=oldColor;
     }
     if (i%2==0){
      otable.tBodies[0].rows[i].style.background='';
     } 
     else{
      otable.tBodies[0].rows[i].style.background='grey';
     }
    }
   }
  </script>
 </head>
 <body>
  <table  id="tab1" border="1" width="500">
   <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张三</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr>
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr>
     <td>4</td>
     <td>李明</td>
     <td>29</td>
    </tr>
    <tr>
     <td>5</td>
     <td>韩梅</td>
     <td>21</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

使用oldColor标记每行的原有颜色，防止鼠标移入移出的操作覆盖掉原有的隔行变色效果

3.表格添加删除

题目描述

建立表格，实现点击按钮的添加操作，以及点击删除的删除对应行操作
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script> 
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oname=document.getElementById("name");
    var oage=document.getElementById("age");
    var obut=document.getElementById("but1");
    var adel=document.getElementsByTagName("a");
    var id=otab.tBodies[0].rows.length+1;
    obut.onclick=function(){
     var otr=document.createElement("tr");
     var otd1=document.createElement("td");
     otd1.innerHTML=id++;
     otr.appendChild(otd1);
     var otd2=document.createElement("td");
     otd2.innerHTML=oname.value;
     otr.appendChild(otd2);
     var otd3=document.createElement("td");
     otd3.innerHTML=oage.value; 
     otr.appendChild(otd3);
     var otd4=document.createElement("td");
     otd4.innerHTML='<a href="javascript:;">删除</a>';
     otr.appendChild(otd4);
     otab.tBodies[0].appendChild(otr);
     for (var i=0;i<adel.length;i++){
      adel[i].onclick=function(){
       otab.tBodies[0].removeChild(this.parentNode.parentNode)
      }
     }
     
    }  
    
    
   };
  </script>
 </head>
 <body>
  姓名：<input id="name" type="text"/>
  年龄：<input id ="age" type="text"/>
  <input id="but1" type="button" value="添加"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>张三</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>3</td>
       <td>王五</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
    </table>
   </body>
  </html>
  
 </body>
</html>

为防止ID项重复，使用id变量进行表格第一列的填充。

4.表格搜索

题目描述

实现不区分大小写，支持模糊搜索与多关键词搜索的表格
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oName=document.getElementById("name");
    var oBut=document.getElementById("but1");
    oBut.onclick=function(){
     for (var i=0;i<otab.tBodies[0].rows.length;i++){
      var str1=otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
      var str2=oName.value.toLowerCase();
      var arr=str2.split(' ');
      otab.tBodies[0].rows[i].style.background="";
      for (var j=0;j<arr.length;j++){ 
       if (str1.search(arr[j])!=-1){
        otab.tBodies[0].rows[i].style.background="yellow";
       }  
      /* else{
	 otab.tBodies[0].rows[i].style.background="";
	}*/
      }
      
     }
    }
   }
  </script>
    
 </head>
 <body>
  姓名：<input id="name" type="text"/>
  <input id="but1" type="button" value="搜索"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>Lily</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>3</td>
       <td>王四</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
    </table>
 </body>
</html>

search()函数帮助实现模糊搜索，split()函数切分多个关键词帮助实现多关键词搜索。
注释部分的else语句需要拿到循环外侧，否则后面关键词搜索结果会覆盖前面的结果。

5.表格排序

题目描述

将ID乱序的表格按照ID大小重新排序。
在这里插入图片描述

在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oBut=document.getElementById("but1");
    //var otr=document.getElementsByTagName("tr");
    
    oBut.onclick=function(){
     var arr=[];
     for(var i=0;i<otab.tBodies[0].rows.length;i++){
      arr[i]=otab.tBodies[0].rows[i];
     }
     arr.sort(function(li1,li2){
      var s1=parseInt(li1.cells[0].innerHTML); 
      var s2=parseInt(li2.cells[0].innerHTML);
      return s1-s2;
     });
     for (var i=0;i<arr.length;i++){
      otab.tBodies[0].appendChild(arr[i]);
     }
    }
   }
  </script>
 </head>
 <body>
  <input id="but1" type="button" value="排序"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>3</td>
       <td>Lily</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>
       <td>王四</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>1</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
 </body>
</html>

appendChild() 分为从原位置删除、插入尾部两个部分，可用作排序。

莉亚小屋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS项目合集-DOM相关操作

JS项目合集-DOM相关操作题目来源：B站视频JS从入门到精通1.插入元素题目描述点击按钮将文本框中的输入内容插入到第一行中题目代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var otext=document.ge
复制链接

扫一扫