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 ...
随机推荐
- ES6中函数新增的方式方法
---恢复内容开始--- 绪 言 ES6 大家对JavaScript中的函数都不陌生.今天我就为大家带来ES6中关于函数的一些扩展方式和方法. 1.1函数形参的默认值 1.1.1基本用法 ES6 ...
- C#的常见算法（面试）
一.求以下表达式的值,写出您想到的一种或几种实现方法: 1-2+3-4+--+m //方法一,通过顺序规律写程序,同时也知道flag标志位的重要性. static int F1(int m) { ; ...
- aapt不是内部命令
解决方法:在E:\sdk\build-tools\目录下的任意文件夹下查找aapt,复制到E:\sdk\platform-tools,具体盘符是情况而定,如果还不行,尝试配置环境变量!
- iPhone X 适配解决方案
在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhon ...
- JavaScrpit中异步请求Ajax实现
在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需 ...
- HDU1754 I hate it(线段树 单点修改)
好久没打线段树,来一道练练手,但说句实话,I really hate it!!!! 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管 ...
- Problem C: 是否回文数？
Description 定义Data类,有一个int类型的属性.定义其构造函数.setValue函数和isPalindrome函数,其中setValue函数用于设置属性值,isPalindrome用于 ...
- Maven 项目pom.xml报错
Maven项目报 Failure to transfer org.apache.maven.plugins:maven-*-plugin:pom 原因是maven的plugin并未下载到本地 或者本地 ...
- 使用springboot完成密码的加密解密
现今对于大多数公司来说,信息安全工作尤为重要,就像京东,阿里巴巴这样的大公司来说,信息安全是最为重要的一个话题,举个简单的例子: 就像这样的密码公开化,很容易造成一定的信息的泄露.所以今天我们要讲的就 ...
- Markdown规则
第一次写随想,写的不好还请包涵呀!!! 这两天在用markdown写一些文档,感觉还不错,整理一下其规则,对于新手会有帮助. 1. 文章的标题,一般写在首行,第二行添加"---------- ...