看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及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. ORACLE中常见的几种锁

    ORACLE中常见的几种锁: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusive 4 ...

  2. ios NavBar+TarBar技巧

    NavBar+TarBar iphone开发 NavBar+TarBar 1  改变NavBar颜色:选中Navigation Bar 的Tint属性.选中颜色. 2  隐藏“back”按钮: sel ...

  3. 权限管理数据库设计_Rev1

    贴出来自身接触项目以来所接触过的一些企业管理信息系统权限部门的一个通用数据库设计初稿: 设计的文字解释以及各部分的作用等确定可行会再进行描述: 图: 如果有不同意见请轻拍!

  4. 免费web直接打印的控件PAZU

    PAZU 是4Fang 四方为配合"四方在线"软件于2004年开发的WEB打印控件,适用于各种WEB软件项目的打印.PAZU是客户端软件,使用于IE作为客户端的所有应用,与服务器端 ...

  5. 使用Yeoman搭建 AngularJS 应用 (5) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/scaffold-app.html 基架 (Scaffolding) 在Yeoman中的意思是为基于你特殊的配置需求,为网站程序生成文件的工 ...

  6. Ext4.2 grid 条件查询使用

    项目中用到Ext4.2,初次接触,用的不是太熟,做个总结,恳请指正! 1.grid重新设置条件,查询结果不是从第1页开始 在处理grid条件查询时,点击搜索按钮调用store.load()方法时,会把 ...

  7. C#中Thread.sleep()

    我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题:1.假设现在是 2008-4-7 12:00:00.000,如果我调 ...

  8. Samza的ApplicationMaster

    当Samza ApplicationMaster启动时,它做以下的事情: 通过STREAMING_CONFIG环境变量从YARN获取配置信息(configuration) 在随机端口上 启动一个JMX ...

  9. jsp关于include html、jsp等文件出现乱码问题的解决方案

    一般来说使用jsp标签<jsp:include>引入一个jsp文件: ①可以在被引入的jsp中加入:<%@ page contentType="text/html;char ...

  10. 12232 - Exclusive-OR

    12232 - Exclusive-OR 题目大意是可以设定一个点Xp=v,或者Xp^Xq=v,然后查询Xa^Xb^Xc...等于多少. 由于异或操作跟判连通性很类似,这里可以使用并查集来解决,对于X ...