每天一个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"& ...
随机推荐
- js倒计时，秒倒计时，天倒计时
按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...
- final修饰的变量是引用不能变还是对象的内容不能变？
int a=1;此时a是变量: StringBuffer a=new StringBuffer();此时a就是引用变量,可以说是a引用String对象,通过a来操作String 对象 final St ...
- NodeJS 中npm包管理工具
NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从 ...
- 初识hadoop-历史及其家族（日志一）
1,书籍推荐: 2,Google技术带来的东西: 下一篇:JDK的安装级其中遇到的问题
- Java学习笔记——浅谈数据结构与Java集合框架（第三篇、Map）
桃李春风一杯酒,江湖夜雨十年灯 --寄黄几复 之前图上写错了,是Hashtable类.t是小写的,它是个很古老的类,以至于命名都没有那么规范.. HashMap HashMap就是存储key-valu ...
- WPF学习随笔
内容控件 Padding内边距,Margin外边距 1.ScrollViewer滚动条控件 <ScrollViewer VerticalScrollBarVisibility="Vis ...
- 深入理解Java虚拟机 自己编译JDK
获取JDK源码 先明确OpenJDK和Sun/OracleJDK之间,以及OpenJDK 6.OpenJDK 7.OpenJDK7u和OpenJDK 8等项目之间是什么关系,这有助于确定接下来编译要使 ...
- Eclipse设置问题：字体大小、修改注释内容、修改快捷键
一.设置字体大小,看下图,包括了设计代码字体大小和控制台输出字体大小 二.修改注释内容 选择window---->>preferences 选择Java---->>code s ...
- Hibernate笔记一：HIbernate配置-HelloWorld
hibernate介绍: Hibernate是一个开源的对象关系映射框架,它对JDBC进行了轻量级的对象封装,使Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 它不仅提供了从java类到数 ...
- Day5模块-random模块
random:随机数 >>> import random>>> print(random.random()) #生成随机小数0.6906362176182085 & ...