JS-表格数据的添加与删除、搜索
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS练习-表格数据的添加与删除、搜索</title>
<style>
</style>
<script>
window.onload=function()
{
var oTab=document.getElementById('table1')
var oName=document.getElementById('name')
var oAge=document.getElementById('age')
var oBtn=document.getElementById('btn')
var oSearch=document.getElementById('search')
var oSearchBtn=document.getElementById('searchBtn')
var id=oTab.tBodies[0].rows.length+1//定义序号变量
oBtn.onclick=function()
{
var oTr=document.createElement('tr')
var oTd=document.createElement('td')
oTd.innerHTML=id++
oTr.appendChild(oTd)
var oTd=document.createElement('td')
oTd.innerHTML=oName.value
oTr.appendChild(oTd)
var oTd=document.createElement('td')
oTd.innerHTML=oAge.value
oTr.appendChild(oTd)
var oTd=document.createElement('td')
oTd.innerHTML='<a href="javascript:;">删除</a>'
oTr.appendChild(oTd)//添加表格行
oTd.getElementsByTagName('a')[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode)
}//删除表格行
oTab.tBodies[0].appendChild(oTr)
}
oSearchBtn.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 sTxt=oSearch.value.toLowerCase()
var attr=sTxt.split('')
oTab.tBodies[0].rows[i].style.background=''
for( var j=0; j<attr.length; j++)
{
if(sTab.search(attr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow'
}
}
}
}//模糊搜索,多关键字搜索
}
</script>
</head>
<body>
姓名:<input type="text" id="name" placeholder="请输入姓名">
年龄:<input type="text" id="age" placeholder="请输入年龄">
<input id="btn" type="button" value="添加"><br><br>
<input type="text" id="search" placeholder="请输入你的姓名">
<input type="button" id="searchBtn" value="搜索"><br><br>
<table id="table1" border="1" width="800px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>陈子君</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>13</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>45</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>50</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>S物流</td>
<td>35</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>我</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>surPrise</td>
<td>30</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
JS-表格数据的添加与删除、搜索的更多相关文章
- JS学习笔记(3)--json格式数据的添加,删除及排序方法
这篇文章主要介绍了json格式数据的添加,删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加.删除与排序的实现技巧,需要的朋友可以参考下 本文实例讲述了json格式 ...
- Python实现单链表数据的添加、删除、插入操作
Python实现单链表数据的添加.删除.插入操作 链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结 ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- SQL Server 数据的添加修改删除和查询
数据的添加: 首先建立一个数据库,点击新建查询,然后用代码建立一个表,表里写上列名和数据类型,约束可加可不加 然后使用insert语句往表里添加数据 insert [into] 表名 (列名1,列名2 ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
- js表格上下移动添加删除
html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...
随机推荐
- Python的字符串和列表和字典的方法/函数
字符串 S.find()#可指定范围查找字串,返回索引值,否则返回-1 S.index()#同find,只是找不到的之后返回异常 S.count()#返回找到字串的个数 S.lower()#转小写 S ...
- Redis Server分布式缓存编程
这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. 背景介绍 Redis是最快的key-value分布式缓存之一 缺点: 没有本地数据缓冲, 目前还没 ...
- 挖掘更合适的MVP模式的架构设计
关于MVP,关于android,不得不说这篇博客已经来的非常晚了,这篇博客早就想写了,一直都在偷懒,就不给自己这么久的偷懒找借口了.尽管这篇文章po出来的比較晚.可是我所接触的程序猿一些朋友之 ...
- C++实现KMP模式匹配算法
#include<iostream> #include<string> #include<vector> using namespace std; void Nex ...
- unix2dos/dos2unix
dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...
- 设计模式-(17)策略模式 (swift版)
一,概念: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们可以相互替换,让算法独立于使用它的客户而独立变化. 二,使用场景 1.针对同一类型问题的多种处理方式,仅仅是具体行为有差别时: ...
- Java之jdk命令行工具详解
JPS---虚拟机进程状况工具 常用的参数: -l 输出Java应用程序的main class的完整包 -q 仅显示pid,不显示其它任何相关信息 -m 输出传递给main方法的参数 -v 输出传递给 ...
- mysql sakila 执行失败
1.下载 https://dev.mysql.com/doc/index-other.html 2.解压 3.将解压的文件放入某个位置,必须tmp下面 4.登录mysql 进行source处理 mys ...
- HTTP传输二进制初探
[转]HTTP传输二进制初探 http://www.51testing.com/?uid-390472-action-viewspace-itemid-233993 [转]HTTP传输二进制初探 上一 ...
- 并不对劲的trie树
听上去像是破坏植物的暴力行为(并不). 可以快速查询某个字符串在某个字符串集中出现了几次,而且听上去比字符串哈希靠谱. 把整个字符串集建成树,边权是字符,对于字符串结尾的节点进行特殊标记. 这样一方面 ...