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 ...
随机推荐
- Cocos 2d-X Lua 游戏添加苹果内购(二) OC和Lua交互代码详解
这是第二篇 Cocos 2d-X Lua 游戏添加苹果内购(一) 图文详解准备流程 这是前面的第一篇,详细的说明了怎样添加内购项目以及填写银行信息提交以及沙盒测试员的添加使用以及需要我们注意的东西,结 ...
- Jquery的树插件jqxTreeGrid的使用小结
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- 域名系统DNS
一.域名系统是什么 域名系统其实就是一个把主机名解析为IP地址的名字系统. 因特网使用层次树状结构的命名方法,并使用分布式的域名系统DNS.因特网的域名系统DNS被设计成一个联机分布式数据库系统,并采 ...
- 关于git常见的一些问题
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 Mark一下,最近用的比较少,担心忘记了. 作为一个程序员,git或者SVN是必备技能,尤其是 ...
- JMeter 压力测试使用CSV参数
表示之前从没用过JMeter所以记录一下使用过程 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测 ...
- C#中的常识
1.快捷键 Ctrl+K+D:快速对齐代码 Ctrl+Z:撤销 Ctrl+S:保存 Ctrl+J:快速弹出智能提示 Shift+End.Shift+Home:快速选中 Ctrl+K+C:注释所选代码 ...
- 深度揭秘ES6代理Proxy
最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子,很少有说明Proxy原理的文章,要知道只有真正掌握了一项技术的原理,才能够写出精妙绝伦的代码,所以我觉得有必要写一篇关于深刻揭 ...
- ASP.NET Core 认证与授权[4]:JwtBearer认证
在现代Web应用程序中,通常会使用Web, WebApp, NativeApp等多种呈现方式,而后端也由以前的Razor渲染HTML,转变为Stateless的RESTFulAPI,因此,我们需要一种 ...
- Spring框架学习之注解配置与AOP思想
上篇我们介绍了Spring中有关高级依赖关系配置的内容,也可以调用任意方法的返回值作为属性注入的值,它解决了Spring配置文件的动态性不足的缺点.而本篇,我们将介绍Spring的又一大核心 ...
- RabbitMQ消息队列系列教程（一）认识RabbitMQ
摘要 RabbitMQ是最为流行的消息中间件,是处理高并发业务的利器.本系列教程,将跟大家一起学习RabbitMQ. 目录 RabbitMQ是什么? RabbitMQ的特点是什么? 一.RabbitM ...