每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作
以下是简易效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table {
width: 555px;
text-align: center;
}
table a {
text-decoration: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var formElements = document.querySelector('form');
var inputElements = document.querySelectorAll('input');
var tableElements = document.querySelector('table');
var tbodyElements = tableElements.querySelector('tbody');
var selectElements = document.querySelector('div select');
var checkAll = document.querySelector('thead input');
var delAll = document.querySelector('thead a');
var nub = 0;
inputElements[2].onclick = function(){
for(var i = 0; i < 2; i++){
if(inputElements[i].value==""||selectElements.value==""){
alert('请输入完整信息');
inputElements[i].focus();
return;
}
}
var trElements = document.createElement('tr');
trElements.innerHTML = '<td><input type="checkbox"></td><td>'+(nub+1)+'</td><td>'+inputElements[0].value+'</td><td>'+inputElements[1].value+'</td><td>'+selectElements.value+'</td><td><a href="javascript:;">上移</a> <a href="javascript:;">下移</a> <a href="javascript:;">删除</a></td>';
var aElements = trElements.querySelectorAll('a');
aElements[0].onclick = function(){
if(trElements.previousElementSibling){
tbodyElements.insertBefore(trElements,trElements.previousElementSibling);
} else{
alert("这已经是第一个了");
}
};
aElements[1].onclick = function(){
if(trElements.nextElementSibling){
tbodyElements.insertBefore(trElements.nextElementSibling,trElements);
} else{
alert("这已经是最后一个了");
}
};
aElements[2].onclick = function(){
tbodyElements.removeChild(trElements);
tellCheckAll();
};
tbodyElements.appendChild(trElements);
checkAll.checked = false;
for(var i = 0; i < 2; i++){
inputElements[i].value = "";
}
selectElements.value = "";
nub++;
var checkboxElements = tbodyElements.getElementsByTagName('input');
checkAll.onchange = function(){
for(var i = 0; i < checkboxElements.length; i++){
checkboxElements[i].checked = this.checked;
}
};
delAll.onclick = function(){
for(var i = 0; i < checkboxElements.length; i++){
if(checkboxElements[i].checked){
tbodyElements.removeChild(checkboxElements[i].parentNode.parentNode);
i--;
}
}
checkAll.checked = false;
};
for(var i = 0; i < checkboxElements.length; i++){
checkboxElements[i].onchange = function(){
tellCheckAll();
};
}
function tellCheckAll(){
var isCheck = true;
for(var i = 0; i < checkboxElements.length; i++){
if(!checkboxElements[i].checked){
isCheck = false;
break;
}
}
checkAll.checked = isCheck;
};
};
};
</script>
</head>
<body>
<form>
<div>
<label for="">姓名<input type="text"></label>
<label for="">年龄<input type="text"></label>
<label for="">性别
<select id="">
<option value=""></option>
<option value="女">女</option>
<option value="男">男</option>
<option value="保密">保密</option>
</select>
</label>
<input type="button" value="添加">
</div>
<table border="1">
<thead>
<tr>
<th>
<input type="checkbox">
<a href="javascript:;">删除所选</a>
</th>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作的更多相关文章
- 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之日历制作。主要知识点：日期函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- 将子域名请求路由到MVC区域
写了个扩展,分享给需要的朋友. 0x01 使用方法 在mvc区域中的{xxxx}AreaRegistration.cs文件中,如ProjectsAreaRegistration.cs <pre& ...
- 一个想法照进现实-《IT连》创业项目：创业时该不该用新手程序员
前言: 距离上一篇文章,转眼已然一个多月了,这段时间没出来和大伙汇报创业的进度,怪我了. 最近又感冒了,已经一个多星期了,还在感冒中,不过感冒也不能偷懒了,每天都有大把的事情等着我解决~~~ 不过今天 ...
- sublime text 3文件标题无法显示中文的解决办法
前言 你是否遇也到了sublime文件标题无法显示中文的问题呢?如下列图片所示: 解决办法 1.点击菜单栏Preferences - > Settings. 打开下图: 2.在右边User内加入 ...
- druid抛出的异常------javax.management.InstanceAlreadyExistsException引发的一系列探索
最近项目中有个定时任务的需求,定时检查mysql数据与etcd数据的一致性,具体实现细节就不说了,今天要说的就是实现过程中遇到了druid抛出的异常,以及解决的过程 异常 异常详细信息 五月 05, ...
- [刷题]算法竞赛入门经典(第2版) 5-9/UVa1596 - Bug Hunt
//开学了,好烦啊啊啊啊啊!怎么开个学那么多破事情!!都俩星期了,终于有时间写出来一道题 题意:不难理解,不写了.这几天忙的心累. 代码:(Accepted, 0.010s) //UVa1596 - ...
- 深入理解Java常用类----String（二）
上篇介绍了String类的构造器,获取内部属性等方法,最后留下了最常用的局部操作函数没有介绍,本篇将接着上篇内容,从这些最常见的函数的操作说起,看看我们日常经常使用的这些方法的内部是怎么实现的.第一个 ...
- java web 导出Excel 的工具类公用实现
平时我们在开发后端管理的系统时,经常会出现导出Excel的功能.这个功能很简单,但是呢,我一般就会使用公用的工具类,在一个Util中,暴露公用导出的接口,只需要传入需要导出的数据(一般使用list集合 ...
- Java IO详解（六)------序列化与反序列化（对象流）
File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...
- Node.js~ioredis处理耗时请求时连接数瀑增
回到目录 关于redis连接数过高的解释 对于node.js开发环境里,使用传统的redis或者使用ioredis都是不错的选择,而在处理大数据请求程中,偶尔出现了连接池( redis服务端的最大可用 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...