---恢复内容开始---

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>

//首先定义一个文档第一次加载时的函数
window.onload = function () {
var oName = document.getElementById('name');//定义变量，来接收文本框id=name的值----下同
var oSex = document.getElementById('sex');
var oAge = document.getElementById('age');
var oHobby = document.getElementById('hobby');
var oTab = document.getElementById('table1');
var oBtn = document.getElementById('btn1');

var ID = oTab.rows.length;//获取表格的长度
oBtn.onclick = function () {//一个匿名函数供oBtn的点击事件使用
var oTr = document.createElement('tr');//添加第一行

//添加编号列
var oTd = document.createElement('td');//添加第一列
oTd.innerHTML = ID++;//给第一行第一列赋值，也就是获取的表格的长度+1，实现编号自增
oTr.appendChild(oTd);//利用appendChild()方法将第一列的给了第一行

//添加姓名列

var oTd = document.createElement('td');
oTd.innerHTML = oName.value;//将文本框姓名的值给了第二列
oTr.appendChild(oTd);//将第二列添加到第一行

//添加性别列（这里用的时直接赋值的方法，有兴趣的人可以使用单选框）

var oTd = document.createElement('td');//创建第三列
oTd.innerHTML = oSex.value;
oTr.appendChild(oTd);

//添加年龄列

var oTd = document.createElement('td');
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);

//添加爱好列

var oTd = document.createElement('td');
oTd.innerHTML = oHobby.value;
oTr.appendChild(oTd);

//添加删除列（操作）

var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);

//带墨绿色的是删除操作

//进行删除操作

//选出tdi里面的第一个a标签，然后给他一个事件，

//获取所有a标签的第一个a标签的onclick事件
oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.removeChild(this.parentNode.parentNode);//利用removeChild()方法----删除他的父级的父级，也就是删除tr级别
}

//将创建的tr元素添加到table中，这就完成了添加的操作了

oTab.appendChild(oTr);
}

//关于搜索模块
//区分大小写.toLowerCase
//模糊搜索 search
//多个关键词的搜索
var oName2 = document.getElementById('name2');
var oBtn2 = document.getElementById('btn2');

oBtn2.onclick = function () {
for (var i = 0; i < oTab.rows.length; i++) {
var sTab= oTab.rows[i].cells[1].innerHTML.toLowerCase();
var sName2 = oName2.value.toLowerCase();

var arr = sName2.split(' ');//以空格隔开多个关键字

//利用search()方法进行多个字符的查询

if (sTab.search(sName2)!=-1) {
oTab.rows[i].style.background = "yellow";
}
else
{
oTab.rows[i].style.background = "";

}
};
};

};
</script>
</head>
<body>
姓名:<input type="text" id="name" />
性别:<input type="text" id="sex" />
年龄:<input type="text" id="age" />
爱好:<input type="text" id="hobby" />
<input type="button" id="btn1" value="提交" /><br />
姓名:<input type="text" id="name2" />
<input type="button" id="btn2" value="搜索" />
<table id="table1" border="1" cellspacing="0" width="350">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
<td>操作</td>
</tr>
</table>
</body>
</html>

appendChild简单表格的增删改查的更多相关文章

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

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

  2. salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  3. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

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

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

  5. 【转载】salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

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

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

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

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

  8. 【Mybatis】简单的mybatis增删改查模板

    简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...

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

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

随机推荐

  1. python模块：datetime

    # Stubs for datetime # NOTE: These are incomplete! import sys from typing import Optional, SupportsA ...

  2. 如何通过Git GUI将自己本地的项目上传至Github（转）

    githud是一个程序员以后成长都会使用到的,先不说很多优秀的开源框架都在这上面发布,光是用来管理自己的demo都已经让人感到很方便,用得也很顺畅.而真正让我下定决心使用github的原因是因为两次误 ...

  3. python黑帽子-黑客与渗透测试编程之道(源代码)

    链接: https://pan.baidu.com/s/1i5BnB5V   密码: ak9t

  4. linq转载

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  5. [UWP] 用 AudioGraph 来增强 UWP 的音频处理能力——AudioFrameInputNode

    上一篇心得记录中提到了 AudioGraph, 描述了一下 什么是 AudioGraph 以及其中涉及到的各种类型的 节点(Node). 这一篇就其中比较有意思的 AudioFrameInputNod ...

  6. 不修改模板的前提下修改VisualState中的某些值

    原文链接:不修改模板的前提下修改VisualState中的某些值 - 超威蓝火 UWP里有一件非常令人不爽的事,大部分控件只提供了Normal状态下的Background,Foreground,Bor ...

  7. Thinking in Java from Chapter 10

    From Thinking in Java 4th Edition 内部类 public class Parcel1 { class Contents { private int i = 11; pu ...

  8. ORACLE 日期加减操作

    无论是DATE还是timestamp都可以进行加减操作. 可以对当前日期加年.月.日.时.分.秒,操作不同的时间类型,有三种方法: 1 使用内置函数numtodsinterval增加小时,分钟和秒2 ...

  9. HTTP请求时间参数设置

    1. JSON 2019-01-18 18:36:35 2. Postman 2019/01/18 18:36:35

  10. .NET手记-JS获取Url参数

    最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...