createElement的应用
原生js表单生成列表实现原理
这里用到的一些方法有
insertBefore()
createElement()
appendChild()
removeChild()
and so on~~
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
section {
width: 800px;
height: 550px;
padding: 80px;
padding-bottom: 30px;
box-sizing: border-box;
margin: 50px auto;
background-size: 100%;
background-color: skyblue;
} .head {
background: #FFFFFF;
height: 150px;
padding: 50px;
box-sizing: border-box;
border-radius: 20px;
margin-bottom: 30px;
} input,
select {
margin: 0;
padding: 0;
color: #87DAF8;
font-weight: bold;
border: none;
outline: none;
background-color: transparent;
} label {
font-weight: bold;
color: #000000;
float: left;
margin-left: 30px;
margin-bottom: 10px;
} label .add {
width: 160px;
height: 30px;
margin-left: 40px;
padding-left: 0;
background-color: #2ec2fe;
border-radius: 15px;
color: #ffffff;
cursor: pointer;
} label>input {
width: 160px;
height: 30px;
padding-left: 20px;
box-sizing: border-box;
border-radius: 15px;
border: 1px solid #87DAF8;
} select {
height: 30px;
padding-left: 20px;
box-sizing: border-box;
border-radius: 15px;
border: 1px solid #87DAF8;
} option {
display: inline-block;
float: left;
padding: 5px;
} .list {
font: 16px/26px "微软雅黑";
} .list div {
float: left;
} .choose_box {
padding-right: 60px;
} .ID_box {
padding-right: 60px;
} .name_box {
padding-right: 60px;
} .age_box {
padding-right: 60px;
} .sex_box {
width: 161px;
} .list dt {
height: 30px;
padding-left: 20px;
padding-top: 3px;
border-radius: 5px;
box-sizing: border-box;
background-color: #3A95AE;
margin-bottom: 5px;
color: #FFFFFF;
} .choose,
.choose1 {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
border: 1px solid #87DAF8;
} dd {
margin: 0;
margin-bottom: 5px;
height: 30px;
color: #87DAF8;
font-weight: bold;
padding-left: 20px;
padding-top: 3px;
border-radius: 5px;
box-sizing: border-box;
background-color: #FFFFFF;
} dd>div:nth-of-type(1) {
width: 85px;
} dd>div:nth-of-type(2) {
width: 62px;
text-align: center;
height:100%;
overflow: hidden;
} dd>div:nth-of-type(3) {
width: 117px;
text-align: center;
height:100%;
overflow: hidden;
} dd>div:nth-of-type(4) {
width: 77px;
text-align: center;
height:100%;
overflow: hidden;
} dd>div:nth-of-type(5) {
width: 102px;
text-align: center;
} dd>div:nth-of-type(6) {
width: 160px;
text-align: center;
} strong {
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
}
</style>
<script>
window.onload = function() {
/*
*
* 1：获取姓名，年龄，性别输入框
* 2：点击添加按钮判断内容是否符合规范
* 3：点击添加按钮生成list列表
* 4：点击选择框按钮事件
* 5：点击上移下移按钮事件
* 6：点击删除按钮事件
*
* */
//1：获取姓名，年龄，性别输入框
var user = $('#user');
var age = $('#age');
var add = $('#add');
var sex = $('.sex_box')[0];
var select1 = $('select')[0];
var choose1 = $('.choose1')[0];
var list = $('dl')[0]
var choose = document.getElementsByTagName('em');
var strong = document.getElementsByTagName('strong');
var num = 0;
var count = 0
add.onclick = function() {
//2：点击添加按钮判断内容是否符合规范
if(user.value == '') { //姓名框不能为空
alert('别闹~~快输入姓名')
} else if(age.value == '' || typeof(Number(age.value)) !== 'number') { //年龄框必须输入数字
alert('自己多大心里没数啊？')
// else if(sex.value){
// alert('不好意思选女博士？？')
}else {
//这里面处理生成下面的列表
var dd = document.createElement('dd');
num++; //每次生成一组数据 前面的序号加1
dd.innerHTML = '<div>' +
'<em class="choose"></em>' +
'</div>' +
'<div class="num">' + num + '</div>' +
'<div>' + user.value + '</div>' +
'<div>' + age.value + '</div>' +
'<div>' + sex.value + '</div>' +
'<div>' +
'<strong>↑</strong>' +
'<strong>↓</strong>' +
'<strong>X</strong>' +
'</div>'
//3：点击添加按钮生成list列表
list.appendChild(dd)
user.value = '';
age.value = '';
//当全选按钮选择后再次添加新的列表内容 就取全选按钮的状态
choose1.style.backgroundColor = '';
list_choose();
handle();
}
} //4：点击选择框按钮事件
choose1.onclick = function() { //处理全选按钮
if(!this.state){//这里初始状态必须是默认null。也就是假的状态，如果设置初始状态在点击添加按钮时会改变这个按钮的状态。
this.style.backgroundColor = '#FFB20F';//改变状态
for(var i = 0; i < choose.length; i++) {//给所有列表项添加选中状态
choose[i].style.backgroundColor = '#FFB20F';
choose[i].state = true;//注意改变所有列表项的状态
count=choose.length;//还要注意改变计数的值
}
this.state=true;
}else{
this.style.backgroundColor = '';//同上
for(var i = 0; i < choose.length; i++) {//同上
choose[i].style.backgroundColor = '';//同上
choose[i].state = false;//同上
count=0;//同上
}
this.state=false;
}
}
function list_choose() {//处理列表项选择框的选择按钮状态
for(var i = 0; i < choose.length; i++) {
choose[i].onclick = function() {
if(!this.state){//这里的this.state为默认值underfind，不可以在点击是设置一个state的状态，否则在点击添加按钮的时候会改变这个状态
this.style.backgroundColor = '#FFB20F';
this.state = true;//改变状态
count++;//计数+1
}else{
this.style.backgroundColor = '';
this.state = false;//改变状态
count--;//计数-1
choose1.style.backgroundColor = '';//改变全选按钮的状态
choose1.state = false;//改变全选按钮的状态
}
if(count==choose.length){//当列表项全都是true的状态时，让全选按钮变为选中状态
choose1.style.backgroundColor = '#FFB20F';
choose1.state=true;
}
}
}
} //5：点击上移下移按钮事件
function handle(){
var dl = document.querySelector('dl')
var dd = document.querySelectorAll('dd')
if(strong.length>0){//这里判断是否存在strong。不加先判断的话会报错
for(var i=0;i<strong.length;i++){//循环所有的strong
if(i%3==0){//这里的这个i%3==0判断的是每个dd里的第一个strong；
strong[i].onclick = function(){
//判断点击向上移动的时候如果是dl的第一个列表项就不再往上移动了
if(this.parentNode.parentNode.previousElementSibling==dl.firstElementChild){
alert('已经第一个了')
return;
}
//这里是让点击的这个列表项移动到他的上一个元素前面
list.insertBefore(this.parentNode.parentNode, this.parentNode.parentNode.previousElementSibling);
sort();//然后重新把id序号更改过来
}
}
if(i%3==1){//这里的这个i%3==1判断的是每个dd里的第二个strong；
strong[i].onclick = function(){
//判断点击向下移动的时候如果是dl的最后一个列表项就不再往下移动了
if(!this.parentNode.parentNode.nextElementSibling){
alert('已经最后一个了')
return;
}
//这里是让点击的这个列表项移动到他的下一个元素后面
list.insertBefore(this.parentNode.parentNode, this.parentNode.parentNode.nextElementSibling.nextElementSibling);
sort();//然后重新把id序号更改过来
}
}
if(i%3==2){//这里的这个i%3==2判断的是每个dd里的第三个strong；
strong[i].onclick = function(){
list.removeChild(this.parentNode.parentNode);
sort();
var choose = document.querySelectorAll('.choose')
if(this.parentNode.parentNode.firstElementChild.firstElementChild.state==true){
count--;//注意这里每删掉一个列表项时要把选择按钮的计数更改-1。
}
if(count==choose.length){//当列表项全都是true的状态时，让全选按钮变为选中状态
choose1.style.backgroundColor = '#FFB20F';
choose1.state=true;
} }
}
}
}
}
//处理列表项上下移动的时候ID序号不变
function sort(){
var num = document.querySelectorAll('.num');
for(var i=0;i<num.length;i++){
num[i].innerHTML = i+1
}
}
/*
* 获取元素集合
* */
function $(str){ var dom;//储存找到的元素 if(str.charAt(0)=='.'){
dom = document.getElementsByClassName(str.slice(1)); }else if(str.charAt(0)=='#'){
dom = document.getElementById(str.slice(1));
}else{
dom = document.getElementsByTagName(str);
} return dom;//把获取到的元素给到需要用的人
}
}
</script>
</head> <body>
<section>
<div class="head">
<form action="">
<label for="user">
姓名: <input id="user" type="text" value="" />
</label>
<label for="age">
年龄: <input id="age" type="number" value="" />
</label>
<label for="sex_box">
性别: <select class="sex_box" id="sex_box" name="sex">
<option value="女">女</option>
<option value="男">男</option>
<option value="女博士">女博士 </option>
</select>
</label>
<label for="add ">
<input class="add" id="add" type="button" value="添 加" />
</label>
</form>
</div>
<dl class="list">
<dt>
<div class="choose_box">
<span class="choose1"></span>
<span>全选</span>
</div>
<div class="ID_box">
<span>ID</span>
</div>
<div class="name_box">
<span>姓名</span>
</div>
<div class="age_box">
<span>年龄</span>
</div>
<div style="width:135px;" class="sex_box">
<span>性别</span>
</div>
<div class="handle_box">
<span>操作</span>
</div>
</dt>
<!--<dd>
<div>
<span class="choose"></span>
</div>
<div>1</div>
<div>多多</div>
<div>80</div>
<div>男</div>
<div>
<strong>↑</strong>
<strong>↓</strong>
<strong>X</strong>
</div>
</dd>
<dd>
<div>
<span class="choose"></span>
</div>
<div>2</div>
<div>强强</div>
<div>8</div>
<div>未知</div>
<div>
<strong>↑</strong>
<strong>↓</strong>
<strong>X</strong>
</div>
</dd>
<dd>
<div>
<span class="choose"></span>
</div>
<div>3</div>
<div>飞飞</div>
<div>18</div>
<div>男</div>
<div>
<strong>↑</strong>
<strong>↓</strong>
<strong>X</strong>
</div>
</dd>-->
</dl>
</section> </body> </html>
效果图如下：
createElement的应用的更多相关文章
- createElement与createDocumentFragment的点点区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- 添加删除表格append或 createElement
方法一: js代码:增加一行五列的表格 function AddList(){ $len= document.getElementsByName('goods_name[]').length; obj ...
- HTML DOM对象之createElement（）方法
今天在学习DOM节点操作时,发现了创建DOM节点的createElement()方法的一个有意思的现象. 代码如下: var box=document.getElementById("box ...
- document.createElement()方法
document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...
- js document.createElement()的用法 (转)
document.createElement()的用法 分析代码时,发现自己的盲点--document.createElement(),冲浪一番,总结了点经验. document.createElem ...
- 【前端积累】createElement createTextNode
<!DOCTYPE html> <html><!--树根--> <head> <meta charset="utf-8"> ...
- createElement() 创建元素 appendChild()添加元素
Javascript window 对象的document.createElement() 方法.语法及其使用. 1.方法 创建一个新的html元素对象,并可返回一个Element 对象,新创建的El ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- createElement，createTextNode，appendChild
<html> <head> <meta charset="UTF-8"> <title></title> <scr ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Pdf文件处理组件对比(Aspose.Pdf,Spire.Pdf,iText7)
目的 因为公司是做医疗相关软件的,所以经常和文档打交道,其中就包含了Pdf.医院的Pdf(通常是他们的报告)都千奇百怪,而我们一直以来都是在用一些免费且可能已经没人维护了的组件来处理Pdf,所以就经常 ...
- 从入门到放弃之IO
浅说IO 学到现在利用过的特殊符号不少组合起来很多都有让人眼前一亮的用法,在这里先聊聊I/O的一些相关知识. 本文开始之前先介绍一下需要知道的一些小知识和需要注意的地方. 在linux中也是有优先级的 ...
- [板子]segTree
segTree 参考:http://www.cnblogs.com/TenosDoIt/p/3453089.html#c 初学者建议先参考上面“一步一步理解线段树”学习理论. 在这里Code分别为区间 ...
- linux虚拟机局域网网卡配置
1:配置虚拟机 1-1:打开:虚拟机下编辑->虚拟网络编辑器 选择VMnet信息下的桥接模式,在“桥接到”下拉列表里选择自己的网卡. ...
- linux中必会的目录
第1章 find命令扩展 1.1 方法一 |xargs 通过|xargs将前面命令的执行结果传给后面. [root@znix ~]# find /oldboy/ -type f -name " ...
- c++学习笔记---02---从一个小程序说起
从一个小程序说起 这一讲的主要目的是帮助大家在C语言的背景知识上与C++建立联系. 问题探索 问题:对一个整型数组求和. 要求:定义一个存储着 n 个元素的数组,要求用C语言完成这个任务. 赶紧的:大 ...
- 启动Apache出现问题：一直停留在启动界面
问题描述: 由于需要php_curl模块,因此直接在php.ini文件将前面的分号去掉 ,但是重启Apache时出现:一直停留在启动界面,Apache无法正常启动,查看错误日志,显示如下: 解决方 ...
- 一个非常有用的函数—COALESCE
很多人知道ISNULL函数,但是很少人知道Coalesce函数,人们会无意中使用到Coalesce函数,并且发现它比ISNULL更加强大,不用再像以前 IsNull 又 IsNull(SqlServe ...
- Openstack的打包方法
使用setup.cfg和setup.py进行管理 1.setup.py文件内容 # THIS FILE IS MANAGED BY THE GLOBAL REQUIREMENTS REPO - DO ...
- wealoha thrift-client-pool 总结
DefaultEvictionPolicy类是EvictionPolicy接口的实现主要描述,pool中那些idel对象会被Evict,回收.关键代码如下: public boolean evict( ...