原生js表单生成列表实现原理这里用到的一些方法有insertBefore()createElement()appendChild()removeChild()and so on~~<!DOCTYPE html><html> <head> &l ...
原生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 ></em>' + '</div>' + '<div >' + 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 > <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 id="sex_box" name="sex"> <option value="女">女</option> <option value="男">男</option> <option value="女博士">女博士 </option> </select> </label> <label for="add "> <input id="add" type="button" value="添 加" /> </label> </form> </div> <dl > <dt> <div > <span ></span> <span>全选</span> </div> <div > <span>ID</span> </div> <div > <span>姓名</span> </div> <div > <span>年龄</span> </div> <div > <span>性别</span> </div> <div > <span>操作</span> </div> </dt> <!--<dd> <div> <span ></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 ></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 ></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>效果图如下：
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：createElement的应用
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
