appendChild简单表格的增删改查
---恢复内容开始---
<!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简单表格的增删改查的更多相关文章
- 【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建
VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- 【转载】salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建
salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建 VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数 --创建表格 create table aa ( UserName varchar(50 ...
- 用AngularJS实现对表格的增删改查（仅限前端）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【Mybatis】简单的mybatis增删改查模板
简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...
- 基于AT UI实现表格的增删改查遇到的坑
基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...
随机推荐
- Selenium webdriver操作日历控件
一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如:使用定位: driver.findElement ...
- windows下angularJs环境搭建和遇到的问题解决
搭建本地开发环境 angular官网社区上说:你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular. 本人也认为在本地搭建学习环境--靠谱.所以决定尝试一下. 安照中文社区给的步 ...
- 05-使用jQuery操作input的value值
表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...
- ubuntu 配置jdk报错解决办法
vi /etc/profile ,添加如下代码 export JAVA_HOME=/home/mark/android/jdk1.8 export JRE_HOME=/home/mark/androi ...
- C# 最齐全的上传图片方法
方法里包括了图片大小限制.图片尺寸.文件内容等等的判断... 该案例是mvc下的demo,支持单张图片上传. public ActionResult Upload() { string imgurl ...
- Xutils简
//解析 private void myinitData() { RequestParams parms=new RequestParams("http://huixinguiyu.cn/A ...
- oracle基础函数--decode
含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...
- iowait过高处理
网管告警: 告警主机:YiDHLWJKFZ-js-app- 主机IP:192.168.***.*** 告警项目:system.cpu.util[,iowait] 告警时间: :: 告警等级:Warni ...
- Android-Java-静态变量与静态方法内存图
描述Dog对象: package android.java.oop10; public class Dog { public static String name; public static int ...
- Servlet案例6：显示用户的上次访问时间
这里是cookie的简单应用 告诉用户您的上次访问时间是:xxxx-xx-xx xx:xx:xx 思路: 第一次访问该网站时候,记录当前访问时间(new Date()) 把当前时间以cookie的形式 ...