<!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. 利用linux漏洞进行提权

    RHEL5—RHEL6下都可以提权 本人测试环境CenOS6.5:该方法只能用作与有root用户切换到普通用户的环境,如果是普通用户直接登录在执行最后一步的时候直接退出登录 $ mkdir /tmp/ ...

  2. 【我是老中医】codeblocks无法编译的问题解决方法

    前几天把codeblocks的文件夹移动到移动硬盘里面,结果发现从此以后代码不能编译了,当时没有注意,就改用vs写代码,发现真的不是很习惯,正好学妹也碰到这种问题问我怎么解决,然后就百度了一下. 我的 ...

  3. 如何用css3实现一个图片的抖动或者弹跳

    <li onmouseout="this.className='off'"><a href=""><img src=". ...

  4. HTTP状态代码含义

    1.200:正常. 2.201:服务器已经创建了文档,Location头给出了它的URL. 3.202:已经接受请求,但处理尚未完成. 4.203:文档已经正常返回,但一些应答头可能不正确,因为使用的 ...

  5. 从NDK开始吧

    1.eclipse,环境配置略:Window-->Preferences-->Android-->NDK 2.Studio

  6. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  7. C语言实现简单php自定义扩展

    1.下载php源码 下载地址:http://cn2.php.net/get/php-5.6.29.tar.gz/from/this/mirror 传到/usr/local/src/下 上传命令:rz ...

  8. 【MySQL】SQL优化系列之 in与range 查询

    首先我们来说下in()这种方式的查询 在<高性能MySQL>里面提及用in这种方式可以有效的替代一定的range查询,提升查询效率,因为在一条索引里面,range字段后面的部分是不生效的. ...

  9. 可扩展Web架构与分布式系统(转)

    1.1. web分布式系统的设计原则 搭建和运营一个可伸缩的web站点或者应用程序意味着什么?在原始层面上这仅仅是用户通过互联网连接到远程资源-使系统变得可伸缩的部分是将资源.或者访问的资源,分布于多 ...

  10. 代码管理 – SVN

    代码管理工具也用了不少年了,整理下. 管理工具比较 用过VSS,CVS,TFS,SVN还有一个微软内部使用的不记得什么名字了.这里进行一些简单比较,重点介绍SVN的用法. CVS历史悠久,1986年就 ...