每天一个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"& ...
随机推荐
- require.js+bootstrap实现简单的页面登录和页面跳转
小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <he ...
- css常用的属性方法 上篇
自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的. 背景关联 ba ...
- java 内存管理 —— 《Hotspot内存管理白皮书》
说明 要学习Java或者任意一门技术,我觉得最好的是从官网的资料开始学习.官网所给出的资料总是最权威最知道来龙去脉的.而Java中间,垃圾回收与内存管理是Java中非常重要的一部分.<Hot ...
- AIX误删除LV后如何进行现场保护和数据恢复工作
在AIX环境下,若因维护误操作.存储mapping错误等,不小心将LV误删除,这种损失通常是巨大的.删除后的不当保护及恢复操作可能使数据无法恢复,也可能增加处理的时间与算法复杂度.如何有效保护现场,并 ...
- 进程间通信系列 之 命名管道FIFO及其应用实例
进程间通信系列 之 概述与对比 http://blog.csdn.net/younger_china/article/details/15808685 进程间通信系列 之 共享内存及其实例 ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- Spring框架基础知识
本人博客文章网址:https://www.peretang.com/basic-knowledge-of-spring-framework/ Spring框架简介 Spring , 一个开源的框架 , ...
- hdu1698线段树区间更新
题目链接:https://vjudge.net/contest/66989#problem/E 坑爹的线段树照着上一个线段树更新写的,结果发现有一个地方就是不对,找了半天,发现是延迟更新标记加错了!! ...
- Linux下Tomcat进行远程调试
1.更改tomcat远程调试端口(可以使用默认端口不更改) 打开目录下的catalina.sh文件,找到JPDA_ADDRESS=”8000”,8000代表远程调试端口,可以更改成其他没有被占用的端口 ...
- HTTP协议详解以及URL具体访问过程
1.简介 1.1.HTTP协议是什么? 即超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.从 ...