欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS（六）

程序员文章站 2022-04-10 09:45:44
表格获取alert(oTab.tBodies[0].rows[1].innerHTML);隔行变色

表格

  • 获取alert(oTab.tBodies[0].rows[1].innerHTML);
  • 隔行变色
    <table id="tab1" border="1" width = "500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>a</td>
                <td>10</td>
            </tr>
            <tr>
                <td>2</td>
                <td>b</td>
                <td>11</td>
            </tr>
            <tr>
                <td>3</td>
                <td>c</td>
                <td>12</td>
            </tr>
            <tr>
                <td>4</td>
                <td>d</td>
                <td>13</td>
            </tr>
        </tbody>
    </table>


    <script>
        window.onload = function(){
            var oTab = document.getElementById('tab1');

            for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                if(i%2){
                    oTab.tBodies[0].rows[i].style.background = '';
                }else{
                    oTab.tBodies[0].rows[i].style.background = 'gray';
                }
            }
        };
    </script>

JS（六）

  • 单行高亮显示
<table id="tab1" border="1" width = "500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>a</td>
                <td>10</td>
            </tr>
            <tr>
                <td>2</td>
                <td>b</td>
                <td>11</td>
            </tr>
            <tr>
                <td>3</td>
                <td>c</td>
                <td>12</td>
            </tr>
            <tr>
                <td>4</td>
                <td>d</td>
                <td>13</td>
            </tr>
        </tbody>
    </table>


    <script>
        window.onload = function(){
            var oTab = document.getElementById('tab1');
            var oldColor = '';

            for(var i=0;i<oTab.tBodies[0].rows.length;i++){

                oTab.tBodies[0].rows[i].onmouseover = function(){
                    oldColor = this.style.background;
                    this.style.background = 'yellow';
                };
                oTab.tBodies[0].rows[i].onmouseout = function(){
                    
                    this.style.background = oldColor;
                };

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

JS（六）

  • 添加删除

    姓名：<input type="text" id="name">
    年龄：<input type="text" id="age">
    <input type="button" id="btn1" 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>a</td>
                <td>10</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>b</td>
                <td>11</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>c</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>d</td>
                <td>13</td>
                <td></td>
            </tr>
        </tbody>
    </table>


    <script>
        window.onload=function ()
        {
            var oTab=document.getElementById('tab1');
            
            var oBtn=document.getElementById('btn1');
            var oName=document.getElementById('name');
            var oAge=document.getElementById('age');
            var id=oTab.tBodies[0].rows.length+1;
            
            oBtn.onclick=function ()
            {
                var oTr=document.createElement('tr');
                
                var oTd=document.createElement('td');
                oTd.innerHTML=id++;
                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);
                
                oTd.getElementsByTagName('a')[0].onclick=function ()
                {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                };
                
                oTab.tBodies[0].appendChild(oTr);
            };
        };
        </script>

JS（六）

  • 搜索
    • 将字符转化为全小写toLowerCase
    • 找到并返回字符串出现的位置，若没找到则返回-1search('')
    • split('')将字符串用某个东西隔开
 	<script>
        var str = '123 456 qwe';
        var arr = str.split(' ');		//用空格隔开
        alert(arr);
      </script>

JS（六）


    姓名：<input type="text" id="name">
    <input type="button" id="btn1" 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>王A</td>
                <td>10</td>
            
            </tr>
            <tr>
                <td>2</td>
                <td>张b</td>
                <td>11</td>
             
            </tr>
            <tr>
                <td>3</td>
                <td>李C</td>
                <td>12</td>
            
            </tr>
            <tr>
                <td>4</td>
                <td>刘C</td>
                <td>13</td>
            
            </tr>
        </tbody>
    </table>


    <script>
        window.onload=function ()
        {
            var oTab=document.getElementById('tab1');
            var oTxt=document.getElementById('name');
            var oBtn=document.getElementById('btn1');
            
            oBtn.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 sTxt=oTxt.value.toLowerCase();
                    
                    var arr=sTxt.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';
                        }
                    }
                }
            };
        };
        </script>

JS（六）
JS（六）
JS（六）

  • 筛选
 姓名：<input type="text" id="name">
    <input type="button" id="btn1" value="筛选">
    <table id="tab1" border="1" width = "500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>王A</td>
                <td>10</td>
            
            </tr>
            <tr>
                <td>2</td>
                <td>张b</td>
                <td>11</td>
             
            </tr>
            <tr>
                <td>3</td>
                <td>李C</td>
                <td>12</td>
            
            </tr>
            <tr>
                <td>4</td>
                <td>刘C</td>
                <td>13</td>
            
            </tr>
        </tbody>
    </table>


    <script>
        window.onload=function ()
        {
            var oTab=document.getElementById('tab1');
            var oTxt=document.getElementById('name');
            var oBtn=document.getElementById('btn1');
            
            oBtn.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 sTxt=oTxt.value.toLowerCase();
                    
                    var arr=sTxt.split(' ');
                    
                    oTab.tBodies[0].rows[i].style.display='none';
                    
                    for(var j=0;j<arr.length;j++)
                    {
                        if(sTab.search(arr[j])!=-1)
                        {
                            oTab.tBodies[0].rows[i].style.display='block';
                        }
                    }
                }
            };
        };
        </script>

JS（六）
JS（六）

  • 排序
<input type="button" id="btn1" value="排序">
    <table id="tab1" border="1" width = "500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>4</td>
                <td>王A</td>
                <td>10</td>
            
            </tr>
            <tr>
                <td>9</td>
                <td>张b</td>
                <td>11</td>
             
            </tr>
            <tr>
                <td>10</td>
                <td>李C</td>
                <td>12</td>
            
            </tr>
            <tr>
                <td>6</td>
                <td>刘C</td>
                <td>13</td>
            
            </tr>
        </tbody>
    </table>


    <script>
        window.onload=function ()
        {
            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            
            oBtn.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]);
                }
            };
        };
        </script>

JS（六）
JS（六）

本文地址：https://blog.csdn.net/weixin_45716667/article/details/107240073

上一篇： python3.9.1环境安装的方法(图文)

下一篇： 首次模拟JS轮播图效果

推荐阅读

ID 姓名 年龄