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

<!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. centos7配置Hadoop集群环境

    参考: https://blog.csdn.net/pucao_cug/article/details/71698903 设置免密登陆后,必须重启ssh服务 systermctl restart ss ...

  2. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

  3. verilog 有符号数运算

    1)之前的笔记写过<补码探讨>,可知在FPGA综合成电路的时候最底层都是以补码的形式在运算,正数的补码就是本身,负数的补码要取反+1. (2)那么Verilog中编程的时候对编程人员来说, ...

  4. 在Word中插入Excel对象

    using Word = NetOffice.WordApi; Word.Document doc = this._wordApplication.Documents.Add(@"C:\Us ...

  5. A1280. 最长双回文串

    学习了回文树,地址:http://blog.csdn.net/u013368721/article/details/42100363: 这个题就是正这反着加一遍就好,一开始我想的是枚举每个位置,然后一 ...

  6. Vuejs——（８）Vuejs组件的定义

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  7. MySQL常用内置变量

      MySQL用很多常用的内置变量,掌握这些内置变量后对于我们快速获取当前MySQL的配置有很大帮助,下面就来列举几个常用的变量. 查看当前MySQL版本号信息.show variables like ...

  8. Android开发 - ImageView加载Base64编码的图片

    在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...

  9. ES6-字符串扩展-padStart()，padEnd()

    ES6 引入了字符串补全长度的功能,如果某个字符串不够指定长度,会在头部活尾部补全. padStart() 用于头部补全: padEnd() 用于尾部补全. 上面代码中,padStart 和 padE ...

  10. Spring 中初始化一个Bean对象时依赖其他Bean对象空指针异常

    1. Bean依赖关系 一个配置类的Bean,一个实例Bean: 实例Bean初始化时需要依赖配置类的Bean: 1.1 配置类Bean @ConfigurationProperties(prefix ...