当前位置：移动技术网 > IT编程>开发语言>JavaScript > JS（六）

JS（六）

2020年07月11日 | 移动技术网IT编程 | 我要评论

表格

获取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>

在这里插入图片描述

单行高亮显示

<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>

在这里插入图片描述

添加删除


    姓名：<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>

在这里插入图片描述

搜索
- 将字符转化为全小写toLowerCase
- 找到并返回字符串出现的位置，若没找到则返回-1search('')
- split('')将字符串用某个东西隔开

 	<script>
        var str = '123 456 qwe';
        var arr = str.split(' ');		//用空格隔开
        alert(arr);
      </script>

在这里插入图片描述


    姓名：<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>

在这里插入图片描述

筛选

 姓名：<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>

在这里插入图片描述

排序

<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>

在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

独立出来的几种轮播图写法

轮播图的几种写法轮播图的几种写法第一种方法——轮播图加动画函数（推荐这种）index.jsanimate.js（... [阅读全文]
输入URL后......

输入URL后...输入URL、进行DNS域名解析、获得域名对应IP与对应IP的服务器三次握手建立TCP连接浏览器... [阅读全文]
Web编程入门 2.1 jQuery Validate方法以及批量验证的修改方法

表单验证是一个经常出现的需求，比如当我添加一个订单的时候，首先就要验证用户输入的数据是否合法，才能进行下一步的操... [阅读全文]
Web Worker 跨域访问

Web Worker按照字面意思应该翻译成“工作者线程”，这个API有点类似MFC里的线程函数，MFC的线程函数... [阅读全文]
js事件委托、Cookie缓存、转码解码、严格模式以及异常处理

主要内容1、js事件委托；2、cookie缓存；3、转码解码4、js严格模式；5、js中异常处理（try、cat... [阅读全文]
第二章：Js基础（二）(javaScript)

1、DOM（Document Object Model）文档对象模型文档其实是一个网页：•通过 id 找到 HT... [阅读全文]
js中的防抖与节流的用法与区别

概念函数防抖：触发搞频率事件后n秒内函数只会执行一次，如果n秒内高频率事件再次被执行则重新计算时间函数节流：高频... [阅读全文]
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(二十)整理维护

目录解决方案JavaScript脚本// ==UserScript==// @name 易班优课... [阅读全文]
使用kettle进行problem表迁移

使用kettle进行problem表迁移欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown... [阅读全文]
一步一步实现自定义angular pipe

angular尽管内置许多的pipe，比如date、async、currency等。尽管拿来即用，但是远不能满足... [阅读全文]

网友评论


验证码：

JS（六）

2020年07月11日 | 移动技术网IT编程 | 我要评论

表格

您可能感兴趣的文章:

相关文章:

网友评论