看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几个方法，search方法，

split方法等等

　　效果体验：http://runjs.cn/detail/vm8bz8dl

　　demo下载

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function(){

    var tb = document.getElementById('tb');

    //alert(tb.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

    //alert(tb.tBodies[0].rows[1].cells[1].innerHTML);

    //表格隔行变色和鼠标滑过高亮

    var oldColor = ''; //保存原有的背景色

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

        tb.tBodies[].rows[i].style.background = i% ? '#CCC': '';

        tb.tBodies[].rows[i].onmouseover = function(){

            oldColor  = this.style.background;

            this.style.background = 'yellow';

        }

        tb.tBodies[].rows[i].onmouseout = function(){

            this.style.background = oldColor;

        }

    };

    //添加和删除

    var oBtn = document.getElementById('btn1');

    var oTxt = document.getElementById('txt1');

    var iNowId =  tb.tBodies[].rows.length+;

    oBtn.onclick = function(){

        var oTr = document.createElement('tr');

        var oTd = null;

        oTd = document.createElement('td');

        oTd.innerHTML = iNowId++;

        oTr.appendChild(oTd);

        oTd  = document.createElement('td');

        oTd.innerHTML = oTxt.value;

        oTr.appendChild(oTd);

        oTd = document.createElement('td');

        oTd.innerHTML ='<a href="javascript:void(0);">删除</a>';

        oTr.appendChild(oTd);

        oTd.getElementsByTagName('a')[].onclick = function(){

            tb.tBodies[].removeChild(this.parentNode.parentNode);

        }

        tb.tBodies[].appendChild(oTr);

    }

    //搜索功能(应该算是精确搜索)

    var oBtn2 = document.getElementById('btn2');

    var oTxt2 = document.getElementById('txt2');

    oBtn2.onclick=function(){

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

            var sValueInTb = tb.tBodies[].rows[i].cells[].innerHTML.toLowerCase();

            var sValueInTxt = oTxt2.value.toLowerCase().split(' ');

            if(sValueInTb==sValueInTxt){

                tb.tBodies[].rows[i].style.background = 'red';

            }

            else{

                tb.tBodies[].rows[i].style.background = '';

            }

        }

    }

    //试试

    var str = 'aaa blue';

    var arr = str.split(' ');

    var str2 = 'aaa is a person';

    var sFound = false;

    for(var i=;i<arr.length;i++){

        if(str2.search(arr[i])!=-){

            sFound = true;

        }

    }

    alert(sFound);

    //搜索功能（模糊查询）

    var oBtn3 = document.getElementById('btn3');

    var oTxt2 = document.getElementById('txt2');

    oBtn3.onclick=function(){

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

            var sValueInTb = tb.tBodies[].rows[i].cells[].innerHTML.toLowerCase();

            var sValueInTxt = oTxt2.value.toLowerCase().split(' ');

            var sFound = false;

            for(var j=;j<sValueInTxt.length;j++){

                if(sValueInTb.search(sValueInTxt[j])!=-){

                    sFound = true;

                    break;

                }

            }

            if(sFound){

                tb.tBodies[].rows[i].style.background = 'red';

            }

            else{

                tb.tBodies[].rows[i].style.background = '';

            }

        }

    }

}

</script>

</head>

<body>

    <input type="text" id="txt1">

    <input type="button" id="btn1" value="添加">

    <input type="text" id="txt2">

    <input type="button" id="btn2" value="精确搜索"><input type="button" id="btn3" value="模糊搜索">

    <table border="" width="" id="tb">

        <thead>

            <Tr>

                <Td>ID</Td>

                <Td>姓名</Td>

                <Td>操作</Td>

            </Tr>

        </thead>

        <tbody>

            <tr>

                <Td></Td>

                <Td>abe</Td>

                <Td></Td>

            </tr>

            <tr>

                <Td></Td>

                <Td>a春春</Td>

                <Td></Td>

            </tr>

            <tr>

                <Td></Td>

                <Td>b一流</Td>

                <Td></Td>

            </tr>

            <tr>

                <Td></Td>

                <Td>贰万</Td>

                <Td></Td>

            </tr>

            <tr>

                <Td></Td>

                <Td>aaa</Td>

                <Td></Td>

            </tr>

            <tr>

                <Td></Td>

                <Td>blue</Td>

                <Td></Td>

            </tr>

        </tbody>

    </table>

</body>

</html>

表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  3. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  4. Dom4j 操作， 节点查找 添加 删除 修改 。。。xPath

    转: Dom4j 操作, 节点查找 添加 删除 修改 ...xPath 2013年11月28日 10:48:59 今晚打酱油8 阅读数:8506更多 个人分类: JavaWeb   版权声明:本文为博 ...

  5. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  6. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  7. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  8. 【丛林】HTML Table 表格浅谈（边框、隔行变色

    此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...

  9. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

随机推荐

  1. Android中获取应用程序(包)的信息-----PackageManager的使用(一)

    本节内容是如何获取Android系统中应用程序的信息,主要包括packagename.label.icon.占用大小等.具体分为两个 部分,计划如下:  第一部分: 获取应用程序的packagenam ...

  2. Kinetic使用注意点--group

    new Group(config) 参数: config:包含所有配置项的对象. { x: "横坐标", y: "纵坐标", width: "宽度&q ...

  3. java运算符的优先级和详解

    优先级 符号 名称 结合性(与操作数) 目数 说明 1 . 点 从左到右 双目 ( ) 圆括号 从左到右   [ ] 方括号 从左到右   2 + 正号 从右到左 单目 - 负号 从右到左 单目 ++ ...

  4. Mac下安装Redis图解教程

    去redis官网(http://redis.io/download)自行下载安装包解压缩到本地文件夹,比如放在Mac应用程序文件夹(/Applications/),在终端进入redis文件夹. 需要进 ...

  5. IOS调用相机和相册时无法显示中文

    调用系统相册.相机发现是英文的系统相簿界面后标题显示“photos”,但是手机语言已经设置显示中文 需要在info.plist做如下设置 info.plist里面添加 Localizedresourc ...

  6. 1003: [ZJOI2006]物流运输trans - BZOJ

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  7. Comet、SSE、Web Socket

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(十一) Comet Comet是一种更加高级的Ajax技术("服务器推送&qu ...

  8. zoj 3720

    为什么注释掉的地方是错的?  自己的代码好糟烂..... 直接枚举点  判是否在多边形内  加起来求概率    求面积的时候代码写搓了....     比不过别人两行的代码    而且到现在还找不到错 ...

  9. 让wordpress投稿作者在后台只看到自己的文章

    wordpress支持多作者撰写,让更多的人参与网站内容的创建是个不错的想法,UGC(User-generated content)使网站主题更丰富,不同的内容吸引不同的受众,一个好的网站应该多产生U ...

  10. TaskTracker获取并执行map或reduce任务的过程（一）

    我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求.JobTracker返回给TaskTracker的心跳包中包含有各种a ...