看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及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. 【趟坑】公共引用的jar包 pom的配置方法

    http://www.cnblogs.com/viewcozy/p/4789877.html 接上一篇 ,内部moudule生成jar的方式 上一篇已经实现了,想把jar作为公共的部分让任何项目都可以 ...

  2. Unity3d之UGUI- Image拦截Button响应事件

    在编辑UI的时候Image放在Button前面就会挡掉button的响应 这种情况只需要为Image添加CanvasGroup組件 按照这个属性配置就不会挡掉后面的事件了

  3. 【POJ2104】kth num

    You are working for Macrohard company in data structures department. After failing your previous tas ...

  4. csu 1312 榜单（模拟题）

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1312 1312: 榜单 Time Limit: 1 Sec  Memory Limit: 128 ...

  5. CQRS学习——Storage实现（EF+Code First+DynamicReponsitory）[其四]

    [这里是的实现,指的是针对各个数据访问框架的一个基础实现] 目标 定义仓储/QueryEntry的基本功能 实现仓储的基本功能,以利于复用 实现一些常用的功能 提供一些便利的功能 目标框架 博主使用的 ...

  6. 【更新链接】U盘启动制作工具（UDTOOL） v3.0.2014.0427

    [校验值] 文件: UDTOOLV3_Setup.exe大小: 525 MB版本: 3.0.2014.0427时间: 2014年4月27日MD5: 2E5187B7D9081E8A69B4DC45C8 ...

  7. C++ 嵌套类使用（一）

    一.嵌套类 在一个类的内部定义另一个类,我们称之为嵌套类(nested class),或者嵌套类型.之所以引入这样一个嵌套类,往往是因为外围类需要使用嵌套类对象作为底层实现,并且该嵌套类只用于外围类的 ...

  8. php采集远程文章简单类

    <?php /** * 采集类 * @author Milkcy * @copyright (C) 2012-2015 TCCMS.COM * @lastmodify 2012-07-10 14 ...

  9. 基于http.sys来开发的，真的是非常稳定

    真正的WEB服务器是不会用Indy写的.因为它是基于每连接每线程的. 其实真正的服务器需要下很多功夫,无法快速开发的.比如说,字符串处理.玩服务器基本上就是玩内存.举个例子: var str:Ansi ...

  10. SRM 585 DIV1 L2

    记录dp(i, j)表示前i种卡片的排列,使得LISNumber为j的方法数. #include <iostream> #include <vector> #include & ...