这份代码实现了对表格的增加，删除，更改，查询。

点击一次添加按钮，表格会增加一行。

点击重置按钮，输入框的内容会被清空。

添加一行后，最后两格为更改和删除。点击更改，原有内容会各自显示在一个输入框内，此时更改二字变为保存，更改内容后，点击保存，内容又呈现不可更改状态，保存二字又变为修改；点击删除，删除本行。

在搜索框里输入对应文本，点击搜索，表格内匹配的文本背景变为其他颜色。

<!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实现表格的增删改查的更多相关文章

  1. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  2. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  3. 用AngularJS实现对表格的增删改查（仅限前端）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  5. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  6. 【基础篇】js对本地文件增删改查

    [基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查

  7. 【基础篇】js对本地文件增删改查--查

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  8. 【基础篇】js对本地文件增删改查--改

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  9. 【基础篇】js对本地文件增删改查--删

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

随机推荐

  1. 命令行配置源和安装本地rpm包

    因为Firefox的在写博客时提交代码会丢失缩进,所以打算安装Chrome来写博,还不错,学到了两条命令- [shell] sudo yum-config-manager --add-repo=htt ...

  2. UVA10537 Toll! Revisited

    difkstra + 路径输出 The Toll! Revisited Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & ...

  3. HDU 4812 D Tree 树分区+逆+hash新位置

    意甲冠军: 特定n点树 K 以下n号码是正确的点 以下n-1行给出了树的侧. 问: 所以,如果有在正确的道路点图的路径 % mod  = K 如果输出路径的两端存在. 多条路径则输出字典序最小的一条. ...

  4. python网络爬虫进入（一）——简单的博客爬行动物

    最近.对于图形微信公众号.互联网收集和阅读一些疯狂的-depth新闻和有趣,发人深思文本注释,并选择最佳的发表论文数篇了.但看着它的感觉是一个麻烦的一人死亡.寻找一个简单的解决方案的方法,看看你是否可 ...

  5. CTP API开发期货自动交易平台概论

    题目比较小众,先介绍一下CTP. 综合交易平台CTP(Comprehensive Transaction Platform)是由上海期货信息技术有限公司(上海期货交易所的全资子公司)开发的期货交易平台 ...

  6. openGL线s的绘制

    /** * 缓冲区工具类 */ public class BufferUtil { /** * 将浮点数组转换成字节缓冲区 */ public static ByteBuffer arr2ByteBu ...

  7. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  8. LaTeX新人30分钟从完全陌生到基本入门

    From:http://www.360doc.com/content/13/0117/11/2886802_260681908.shtml 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. ...

  9. Summation of Four Primes - PC110705

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10168.html 原创:Summ ...

  10. 实现WebService的调用与被调用

    之前一直用WCF来开发服务,可是从未用过WebService.对WebService有种很神奇的期待,都说WebService比较简单,但是从未用过就对我来说就是一种新的知识.起始让我来说WCF与We ...