每天一个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"& ...
随机推荐
- 从JDBC到hibernate再到mybatis之路
一.传统的JDBC编程 在java开发中,以前都是通过JDBC(Java Data Base Connectivity)与数据库打交道的,至少在ORM(Object Relational Mappin ...
- [周译见] C# 7 中的模范和实践
原文地址:https://www.infoq.com/articles/Patterns-Practices-CSharp-7 关键点 遵循 .NET Framework 设计指南,时至今日,仍像十年 ...
- MySQL游标的简单实践
Q:为什么要使用游标? A: 在存储过程(或函数)中,如果某条select语句返回的结果集中只有1行,可以使用select into语句(上几篇博客有介绍到用法)来得到该行进行处理:如果结果集中有多行 ...
- Android中EditText设置输入条件
一.应用场景 之前做商城应用时,会有对用户资料的设置情况进行限制,如下: (1)用户邮箱,应当只允许输入英文字母,数字和@.两个符号, (2)用户手机,应当只能输入数字,禁止输入其他字符. (3)用户 ...
- 关于vector push_back()与其他方式读取数据的效率对比
引言: 在读取大量数据(数组)时,使用vector会尽量保证不会炸空间(MLE),但是相比于scanf的读取方式会慢上不少.但到底效率相差有多大,我们将通过对比测试得到结果. 测试数据:利用srand ...
- HTML5工具做屏幕自适应的两种方法
近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...
- 分布式服务：Dubbo+Zookeeper+Proxy+Restful 分布式架构
分布式 分布式服务:Dubbo+Zookeeper+Proxy+Restful 分布式消息中间件:KafKa+Flume+Zookeeper 分布式缓存:Redis 分布式文件:FastDFS ...
- kotlin 语言入门指南一
基于官网的Getting Start部分,翻译如下: 基础语法 定义一个包 包的声明必须放在文件头部: package my.demo import java.util.* // ... 不需要加上p ...
- CountDownLatch——闭锁的实现之一
CountDownLatch实际上是一种闭锁实现.闭锁:是一种同步工具类,可以延迟线程的进度知道其到达终止状态--<Java并发编程实战>.这个怎么解释呢?简单来说,就是有1个线程需要等待 ...
- 单行 JS 实现移动端金钱格式的输入规则
金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式. 但是用户的输入操作是任意的,只是显示提示信息,这 ...