原生js表單生成列表實現原理 這裡用到的一些方法有 insertBefore() createElement() appendChild() removeChild() and so on~~ 效果圖如下： ...
原生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>
效果圖如下：
