js实现表格的增删改查
这份代码实现了对表格的增加，删除，更改，查询。
点击一次添加按钮，表格会增加一行。
点击重置按钮，输入框的内容会被清空。
添加一行后，最后两格为更改和删除。点击更改，原有内容会各自显示在一个输入框内，此时更改二字变为保存，更改内容后，点击保存，内容又呈现不可更改状态，保存二字又变为修改；点击删除，删除本行。
在搜索框里输入对应文本，点击搜索，表格内匹配的文本背景变为其他颜色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的增删改查</title>
<style>
table {
text-align: center;
border-collapse: collapse;
border: 1px solid gray;
}
#tr1 {
background: #99d6ff;
}
a {
text-decoration: none;
color: black;
}
</style>
<script>
window.onload=function()
{var res = document.getElementById('res')
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//定义序号变量
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 td3=document.createElement('td');
oTr.appendChild(td3);
td3.innerHTML= '更改';
td3.style.cursor = 'pointer';
td3.onclick = function(){
var ce = this.parentNode.cells;
if (/.*更改.*/.test(td3.innerHTML)){
for( var i = 0; i < ce.length - 2; i++) {
var txt = document.createElement('input');
txt.type = 'text';
var ci = ce[i];
txt.value =ci.innerHTML;
ci.innerHTML = ' ';
ci.appendChild(txt);
}
td3.innerHTML= '保存';
}
else{
for( var i = 0; i < ce.length - 2; i++){
var ci = ce[i];
ci.innerHTML = ci.children[0].value;
}
td3.innerHTML= '更改';
}
}//更改
var oTd=document.createElement('td')
oTd.innerHTML='<a href="#">删除</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='#99d6ff';
}
}
}
}//模糊搜索，多关键字搜索
res.onclick= function () {
document.getElementById('form').reset();
//重置
}
}
</script>
</head>
<body>
<form id="form">
name：<input type="text" id="name" placeholder="请输入姓名">
age：<input type="text" id="age" placeholder="请输入年龄">
</form>
<br>
<input type="reset" id='res'>
<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">
<tr id="tr1">
<td>ID</td>
<td>name</td>
<td>age</td>
<td>change</td>
<td>delete</td>
</tr>
</table>
</body>
</html>
js实现表格的增删改查的更多相关文章
- 【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- 用AngularJS实现对表格的增删改查（仅限前端）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数 --创建表格 create table aa ( UserName varchar(50 ...
- 基于AT UI实现表格的增删改查遇到的坑
基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...
- 【基础篇】js对本地文件增删改查
[基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查
- 【基础篇】js对本地文件增删改查--查
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--改
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--删
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
随机推荐
- Spring IOC之依赖
一个标准的企业级应用不只有一个对象组成.即使是最简单的引用也会有个相互作用的对象以使最终呈现 在用户面前的是个连贯一致的引用. 1依赖注入 依赖注入(DI)是一个对象定义他们依赖的过程,也就是说他们一 ...
- 一个web开发框架
一个web开发框架 怎么才能成为一名架构师?需要具备哪些条件? 作为一名码农我迫切希望自己成为一个比较合格的web架构师,昨晚心血来潮小弟花了4个小时的时间整了个简易的web开发框架,由于第一次搭建框 ...
- SVN服务器搭建（3）
转自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html vs 2013 svn插件:http://www.visua ...
- Varnish缓存服务
Varnish缓存服务详解及应用实现 1.varnish的基本介绍 Varnish 的作者Poul-Henning Kamp是FreeBSD的内核开发者之一,他认为现在的计算机比起1975年已 ...
- Javascript多线程引擎(六)
Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...
- .Net组件程序设计
.Net组件程序设计之上下文 在后续篇幅的远程调用的文章里有说到应用程序域,那是大粒度的控制程序集的逻辑存在,那么想对对象的控制又由谁来做主呢?没错了,就是上下文.CLR把应用程序域更细化了,在应用程 ...
- IOC 容器在 ASP.NET MVC 中的应用
IOC 容器在 ASP.NET MVC 中的应用 IOC:Inversion Of Control 翻译为控制反转,我们在面向对象软件开发过程中,一个应用程序它的底层结构可能由N种不同的构件来相互协作 ...
- 用Python复习离散数学（二）
这次复习的是计数问题,立刻走起吧! 1.乘法原理 如果一项工作需要t步完成的,第一步有n1种不同的选择,第二步有n2种不同的选择,……,第t步有nt中不同的选择,那么完成这项工作所有可能的选择种数为: ...
- windows下搭建Cygwin环境
windows下搭建Cygwin环境 在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配 ...
- 1 MySQL概述
目录: 1. 简述 2. 历史 3. 同类产品 4. 优点和不足 5. MySQL存储引擎 6. MySQL架构 1. 简述 MySQL是一个关系型数据库管理系统.其体积小,速度快,开发源代码,使用成 ...