看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及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. 拥抱ARM妹子第二季 之 序：我和春天有个约会 - 生命的萌芽

      春姑年轻轻的吻了一下小穆妹纸的额头!从沉睡中苏醒的小穆妹纸,缓缓伸了个懒腰--- 啊-- 睡得真香! 等--等-等-!好像和童话故事里的情节不一样,应该由王子我来亲吻睡梦中的妹纸才能醒!!-- 强 ...

  2. frame 之间访问

    index.asp代码 <frameset rows="50,*,20" cols="*" frameborder="no" bord ...

  3. Nhibernate 一对一关系映射(主键映射)

    参考:点击这里 妈的,搞了一天了,终于可以了,现在总结下,以防下次再出现这样痛苦的问题了,有两个表:user(用户)和Blog(设置表),它们之间的关系正如我所说的是一对一的关系.现在我们来映射这两个 ...

  4. linux下c/c++ IDE开发工具介绍

    为避免以下某个软件安装时不自动安装 build-essential 不妨先执行: sudo apt-get install build-essential [编辑 ]anjuta Anjuta Dev ...

  5. 安装Redis完整过程

    概述    首先报告一下我系统的版本: [root@firefish init.d]# cat /etc/issue 系统版本信息如下: 引用 CentOS release 6.4 (Final) K ...

  6. ECNU1101-Dinic

    题意:从起点到终点有几条特殊路径. 特殊路径指的是:对于任意两条路径,他们的与起点相连的点是不同的点 && 与终点的相连的点是不同的点. /* 题意:从起点到终点有几条特殊路径. 特殊 ...

  7. highcharts 折线图

    <!doctype html> <html lang="en"> <head> <script type="text/javas ...

  8. 网上图书商城项目学习笔记-036工具类之CommonUtils及日期转换器

    1.CommonUtils.java package cn.itcast.commons; import java.util.Map; import java.util.UUID; import or ...

  9. Git教程之远程仓库(9)

    有个叫GitHub的神奇的网站,呵呵,从名字就可以看出,这个网站就是提供Git仓库托管服务的,所以,只要注册一个GitHub账号,就可以免费获得Git远程仓库. 由于本地Git仓库和GitHub仓库之 ...

  10. Android Framework------之Input子系统

    下面这是基于Android4.2代码的关于Input子系统的笔记.在这篇笔记中,只涉及Android相关的东西,关于Linux内核中对各种输入设备的统一,在本文中不作说明.此外,由于才疏学浅,文中难免 ...