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

    INSIDE OF JEMALLOCThe Algorithm and Implementation of Jemalloc author: vector03mail:   mmzsmm@163.co ...

  2. raise_application_error用法

    我们经常通过dbms_output.put_line来输出异常信息,但有时需要把异常信息返回给调用的客户端.此时我们用raise_application_error,允许用户在pl/sql中返回用户自 ...

  3. Matlab生成动态链接库供C#调用

    1.首先在Matlab中编写一个或几个.m文件 2.然后在命令空间中输入命令:deploytool 3.修改工程名称,修改需要生成文件后缀 4.添加类,添加文件,然后点击生成.

  4. Datatables中文API——回调函数

    fnCookieCallback:还没有使用过 $(document).ready(function () { $('#example').dataTable({ "fnCookieCall ...

  5. PlayerPrefs存储数据在本地的存储位置

    PlayerPrefs存储数据时,其在windows的存储路径是注册表: HKEY_CURRENT_USER Software CompanyName ProjectName 其中的CompanyNa ...

  6. 1588: [HNOI2002]营业额统计 - BZOJ

    Description营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天 ...

  7. java、js的编码、解码

    如果在地址栏挂载参数,特别是包含中文,往往要进行编码,取值时再解码,以下是java和js中编码.解码的各自方法. java: @Test public void test3() throws Unsu ...

  8. PAT-乙级-1032. 挖掘机技术哪家强(20)

    1032. 挖掘机技术哪家强(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 为了用事实说明挖掘机技术到底 ...

  9. PAT-乙级-1024. 科学计数法 (20)

    1024. 科学计数法 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HOU, Qiming 科学计数法是科学家用来表示很 ...

  10. 编写你的第一个 Django 程序 第2部分

    原地址:http://django-chinese-docs.readthedocs.org/en/latest/intro/tutorial02.html 本教程上接 教程 第1部分 . 我们将继续 ...