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 ...
随机推荐
- 通过js实现在页面中添加音乐
代码如下!兼容IE // JavaScript Document function autoPlay(){//自动播放 var myAuto = document.getElementById('my ...
- 2014年3I工作室成员的正式名单
后3I认真审议和审查工作室的老师及相关人员,今天,新成员首次正式发布,如以下:博才文(11软件).黄彩云(11软件).朱小丹(11软件).海(11软件).欧剑灵(11此计).黄思源(12软件).黄龙营 ...
- Unit Of Work-工作单元
Unit Of Work-工作单元 阅读目录: 概念中的理解 代码中的实现 后记 掀起了你的盖头来,让我看你的眼睛,你的眼睛明又亮呀,好像那水波一模样:掀起了你的盖头来,让我看你的脸儿,看看你的脸儿红 ...
- js 将long日期格式 转换为标准日期格式方法
我们经常在操作的时候会发现从后台传递到view层的json中datetime类型变成了long型,当然你也可以从后台先转为string类型,但是如果是从和数据库对应的object中封装的话,就不能再去 ...
- linux内核数据结构之链表
linux内核数据结构之链表 1.前言 最近写代码需用到链表结构,正好公共库有关于链表的.第一眼看时,觉得有点新鲜,和我之前见到的链表结构不一样,只有前驱和后继指针,而没有数据域.后来看代码注释发现该 ...
- Oracle常用操作
比较时间 select * from up_date where update < to_date('2007-09-07 00:00:00','yyyy-mm-dd hh24:mi:ss' ...
- YPreLoad
Javascript库 发布我的控件系列:图片预加载控件YPreLoad v1.0 摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad.它可以帮助您预加载图片,并且能显示加载的 ...
- 图解Javascript引用类型之数组
以图说事明理,恰当时候会事半功陪.今天我就尝试着用图的方式讲讲“JavaScript引用类型之数组”.望更多童鞋给我反馈! 好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我 ...
- Discuz! X2.5数据库字典(转)
DROP TABLE IF EXISTS pre_common_admincp_cmenu; CREATE TABLE pre_common_admincp_cmenu ( `id` SMALLINT ...
- Bundles
Bundles 接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法: protected void Applic ...