JS_DOM操作应用高级

最新推荐文章于 2024-11-07 13:38:59 发布

-Y、

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量141

点赞数

分类专栏： javascript 文章标签： javascript js html

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105226370

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

===========================================================================
表格的应用

获取的替代写法：
tBodies、tHead、tFoot、rows、cellst

提取表格元素的常规写法：

alert(Otab.getElementsByTagName('tbody')[0]
.getElementsByTagName('tr')[1]
.getElementsByTagName('td')[1].innerHTML)

提取表格元素的简易写法：（与上面一一对应）

alert(Otab.tBodies[0].rows[1].cells[1].innerHTML)

===========================================================================
隔行变色

<script>
    window.onload=function(){   
        var Otab=document.getElementById('tab1')
        var Ocolor='';//声明一个初始变量用来装原本的颜色便于复原
       for(var i=0;i<Otab.tBodies[0].rows.length;i++)
       {    
           Otab.tBodies[0].rows[i].onmouseover=function()
            {
                Ocolor=this.style.background;
                this.style.background='yellow'
            }
            Otab.tBodies[0].rows[i].onmouseout=function()
            {
                this.style.background=Ocolor
            }

           if(i%2)
           {
            Otab.tBodies[0].rows[i].style.background='';
           }
          else
           {
            Otab.tBodies[0].rows[i].style.background='#ccc';
           }
       }
       
    };
    </script>

===========================================================================

表格的增删：

效果图：
在这里插入图片描述

代码展示：

<script>
    window.onload=function(){   
       var Obtn=document.getElementById('btn')
       var Oclass=document.getElementById('class')
       var Oname=document.getElementById('name')
       var Oage=document.getElementById('age')

       var Otab=document.getElementById('tab')
    
        Obtn.onclick=function()//按钮点击后个单元格的创建
        {
            var Otr=document.createElement('tr')

            var Otd=document.createElement('td')
            Otd.innerHTML=Oclass.value;
            Otr.appendChild(Otd)

            var Otd=document.createElement('td')
            Otd.innerHTML=Oname.value;
            Otr.appendChild(Otd)

            var Otd=document.createElement('td')
            Otd.innerHTML=Oage.value;
            Otr.appendChild(Otd)

            var Otd=document.createElement('td')
            Otd.innerHTML='<a href="javascript:;">删除</a>';
            Otr.appendChild(Otd)

            var Oa=Otd.getElementsByTagName('a')[0]//这里是获取a的标签而且仅有一个所以这样写

            Oa.onclick=function()//点击删除后单元格的整行删除
            {   
                    Otab.tBodies[0].removeChild(this.parentNode.parentNode)
            }

        Otab.tBodies[0].appendChild(Otr)


        }

    };
    </script>
</head>

<body>
    班级：<input id="class" type="text">
    姓名：<input id="name" type="text">
    年龄：<input id="age" type="text">
    <input id="btn" type="button" value="添加">
   <table id="tab" border="1" width="500">
       <thead>
           <td>班级</td>
           <td>姓名</td>
           <td>年龄</td>
           <td>操作</td>
       </thead>
       <tbody>
           <tr>
               <td>1班</td>
               <td>八蛋</td>
               <td>22</td>
               <td></td>
           </tr>
           <tr>
                <td>2班</td>
                <td>张三</td>
                <td>25</td>
                <td></td>
            </tr>
            <tr>
                <td>3班</td>
                <td>李四</td>
                <td>26</td>
                <td></td>
        </tr>
         <tr>
	            <td>6班</td>
	            <td>小缸</td>
	            <td>27</td>
	            <td></td>
        </tr>
         <tr>
	            <td>8班</td>
	            <td>王五</td>
	            <td>15</td>
	            <td></td>
        </tr>
       </tbody>
   </table>
</body>

假设你要设置ID
则可以使用先将序号用变量接收：

var id=Otab.tBodies[0].rows.length+1;

然后再点击事件里的代码中进行自加：

otd.innerHTML=id++;

这样的好处是避免ID的复用

==============================================================================

功能拓展：

1、忽略字符串大小写
获取字符串. toLowerCase（）把字符串都转换为小写

2、模糊搜索
搜索的区域. search（需要搜索的内容）！= -1 可以找出内容再数组中的位置，找不到时为-1

3、多关键字搜索
split（‘字符串’）可以把内容以字符串隔开

搜索部分功能拓展代码：


 Obtn1.onclick=function(){

                for(var i=0;i<Otab.tBodies[0].rows.length;i++)
                {   
                    var Stab=Otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var Stext=Oname.value.toLowerCase()

                    var arr=Stext.split(' ');

                    Otab.tBodies[0].rows[i].style.background='';

                    for(var j=0;j<arr.length;j++)
                    {
                        if(Stab.search(arr[j])!=-1)
                            {
                                Otab.tBodies[0].rows[i].style.background='yellow';
                            }
                    }
                               
                }


        }

==============================================================================

按照ID大小排序：

   Obtn2.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(tr1,tr2){
                var n1=parseInt(tr1.cells[0].innerHTML)
                var n2=parseInt(tr2.cells[0].innerHTML)
                return n1-n2
            })
            for(var i=0;i<arr.length;i++)
            {
                Otab.tBodies[0].appendChild(arr[i])
            }
        }