<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<script>

    window.onload=function()

    {

        var oTab=document.getElementById("tab1");

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

        // //表格可以简便写成下面的

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

        //

        //

        // 隔行变色

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            var col1='';  //储存当前标题栏的颜色

            oTab.tBodies[0].rows[i].onmouseover=function()

            {

                col1=this.style.background;  //先把当前的颜色存储起来

                this.style.background="red";  //当移动到其中的td标签上显示红色

            }

            oTab.tBodies[0].rows[i].onmouseout=function()//当离开td时候，变回原来的颜色

            {

                this.style.background=col1;

            }

            if (i%2)//隔行变色

            {

                oTab.tBodies[0].rows[i].style.background="#ccc";

            }

            else

            {

                 oTab.tBodies[0].rows[i].style.background="";

            }

        }

  //增加一个li

        var name =document.getElementById("name");

        var age =document.getElementById("age");

        var add=document.getElementById("btn");

         var num=oTab.tBodies[0].rows.length+1;//先增加row 的长度

        add.onclick=function()

        {

            var newRow= document.createElement("tr");  //增加新的一行

            var newCell0=document.createElement("td");  //增加新的一列

            newCell0.innerHTML=num++;

            newRow.appendChild(newCell0);

            var newCell1=document.createElement("td");  //再增加一列

            newCell1.innerHTML=name.value;              //text上的值

            newRow.appendChild(newCell1);

            var newCell2=document.createElement("td");   //再增加一列

            newCell2.innerHTML=age.value;              //text的值

            newRow.appendChild(newCell2);

            var newCell3=document.createElement("td");     //增加一列

            newCell3.innerHTML="<a href='javascript:;'>删除</a>";    //加入删除标签

            newRow.appendChild(newCell3);

            oTab.tBodies[0].appendChild(newRow);  // 把这行放入body上

            newCell3.getElementsByTagName("a")[0].onclick=function()   //当点解删除标签删除tr节点

            {

                oTab.tBodies[0].removeChild(this.parentNode.parentNode);  //this为a标签 this.parentNode为td   this.parentNode.parentNode为tr

            }

        }

        //搜索功能

        var oTex=document.getElementById("search1");

        var oBtn=document.getElementById("btn2");

        oBtn.onclick=function()

        {

            for(var i=0;i<oTab.tBodies[0].rows.length;i++)

            {

                var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//行中名字的值并转化成小写

                var sTex=oTex.value.toLowerCase();  //用户输入的值并转化成小写

                var arr=sTex.split(' ');//如果用户用空格隔开关键字

                oTab.tBodies[0].rows[i].style.background='';//把所有的背景都设置为空

                //如果刷选，把css换成block显示就行

                for(var j=0;j<arr.length;j++)

                {

                    if (sTab.search(arr[j])!=-1)  //调用search函数查找截取出来的字符数组，判断是否存在，

                    {

                        oTab.tBodies[0].rows[i].style.background="yellow";//存在改变td的颜色

                    }

                }

            }

        }

    };

</script>

</head>

<body>

姓名：<input type="text" id="name">

年龄：<input type="text" id="age">

<input type="button" value="add" id="btn"/>

<table border="1" width="500px" id="tab1">

    <thead>

        <td>ID</td>

        <td>姓名</td>

        <td>年龄</td>

        <td>操作</td>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Bule</td>

            <td>27</td>

            <td></td>

        </tr>

         <tr>

            <td>2</td>

            <td>张三</td>

            <td>23</td>

            <td></td>

        </tr>

         <tr>

            <td>3</td>

            <td>李四</td>

            <td>28</td>

            <td></td>

        </tr>

        <tr>

            <td>4</td>

            <td>王五</td>

            <td>25</td>

            <td></td>

        </tr>

        <tr>

            <td>5</td>

            <td>张伟</td>

            <td>25</td>

            <td></td>

        </tr>

    </tbody>

</table>

搜素姓名：<input type="text" id="search1" />

<input type="button" value="搜素" id="btn2" />

</body>

</html>

js table的笔记，实现添加 td，实现搜索功能的更多相关文章

  1. angularjs1 实现地图添加自定义控件（搜索功能）及事件

    // 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) ...

  2. Hexo next主题添加站内搜索功能

    根据关键字搜索博文,站内搜索的功能很实用.hexo开启站内搜索很方便,已经有现成的插件可以使用,也是为了方便自己 安装插件 npm install hexo-generator-search --sa ...

  3. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

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

  4. 011.Adding Search to an ASP.NET Core MVC app --【给程序添加搜索功能】

    Adding Search to an ASP.NET Core MVC app 给程序添加搜索功能 2017-3-7 7 分钟阅读时长 作者 本文内容 1.Adding Search by genr ...

  5. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  6. Vue.js 2.x笔记：基本语法（2）

    1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...

  7. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  8. JS SDK 随手笔记

    JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...

  9. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

随机推荐

  1. Mongodb和Hive详细对比

    本文主要用于分析在大数据场景下Mongodb和Hive的优缺点: 支持的数据类型 支持的查询 支持的数据量 性能优化手段

  2. 替换节点及replaceEach方法

    需求: 为所有的 li 节点添加 onclick 响应函数实现 city 子节点和 game 子节点对应位置的元素的互换 window.onload = function(){ //自定义互换两个节点 ...

  3. cx_oracle 执行cur.execute(sql)提交数据出现 UnicodeEncodeError: 'ascii' codec can't encode character u'\u2122' in position 170

    还是中文字符的问题, 解决方法见链接:http://www.oracle.com/technetwork/articles/tuininga-cx-oracle-084866.html import ...

  4. [BZOJ 3191][JLOI 2013]卡牌游戏

    觉得这题很有必要讲一下! 现在发现在做概率题,基本是向 dp 和 马尔可夫链 靠齐 但是这一题真是把我坑了,因为状态太多,马式链什么的直接死了 我一开始的想法就是用 f[i][j] 表示剩余 i 个人 ...

  5. DataTable 批量插入SqlServer数据库 使用：SqlBulkCopy

    简单使用: private void UpdateTitle(DataTable dt) { ) { using (SqlBulkCopy sbc = new SqlBulkCopy(SqlHelpe ...

  6. php lock_sh共享锁 与 lock_ex排他锁

    参考网站:http://hi.baidu.com/honly1215/item/8d27a66d11689c3aac3e83fe 文件锁有两种:共享锁和排他锁,也就是读锁(LOCK_SH)和写锁(LO ...

  7. SDDC－SDN－SDS

    SDDCSDNSDS软件定义存储是一个较大的行业发展趋势,这个行业还包括软件定义网络(SDN)和软件定义数据中心(SDDC). SDDC依赖于虚拟化和云计算技术, SDDC的目标是虚拟化数据中心的一切 ...

  8. ThinkPhp单字母函数

    首先A.D.S.L.C.F.I 他们都在 /THINKPHP/Common/functions.php 这个文件中 下面我分别说明一下他们的功能 A() 加载Action类 D() 加载Model类 ...

  9. PHP递归重新排序无限级分类数组

    public static function Menus($id,$spac=0){ /* $data = array( 1 => array('id' => 1,'name' => ...

  10. 以Administrator权限运行VS时无法拖入文件

    解决办法 1.从任务管理器中关闭explorer进程(你会发现任务栏什么的都没有了) 2.从任务管理器启动explorer.exe(win8需要手动勾选"以管理员权限运行",win ...