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.οnlοad=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.οnclick=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].οnclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode)

}//删除表格行

oTab.tBodies[0].appendChild(oTr)
}

oSearchBtn.οnclick=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.οnclick= function () {
document.getElementById('form').reset();
//重置
}
}

</script>
</head>

<td>change</td>
<td>delete</td>
</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/iriliguo/p/6270639.html

js实现表格的增删改查相关推荐

对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
Js实现简易的增删改查
Js实现简易的增删改查用JavaScript实现简单增删改查工作,这个应该是多数Js初学者都比较棘手的一个问题在下面我给大家写了一个简单的案例,该案例中没有实现增加操作,大家可以自己探索一下 ht ...
python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
js中数组的增删改查遍历迭代过滤
注:最后附有源码,可自行测试,动动手印象更深刻 js中数组的增删改查.排序.遍历.迭代.过滤 1.展开语法 2.解构赋值 3.剩余解构 4.增删改 5.合并拆分 6.查 7.排序 8.遍历 9.迭代 ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
expressjs如何做mysql注入_Node.js+Express+Mysql 实现增删改查
这次选用nodejs+express+mysql 使用http作为客户端,express框架搭建服务端,从而实现数据的增删改查.这篇文章可以算作上篇文章的升级篇,加入了和数据库的交互. 安装 node ...
layui进行分页处理，后端返回数据没有count字段，需要单独获取再添加到数据中，再进行项渲染，另有layui表格数据增删改查前后端交互
整体效果图如下: (1)分页前端界面处理 (2)分页后端的数据处理具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) <!DOCTYPE html&g ...

js实现表格的增删改查

js实现表格的增删改查相关推荐

最新文章

热门文章