createElement的應用

来源:http://www.cnblogs.com/-Steven/archive/2017/11/26/7900775.html
-Advertisement-
Play Games

原生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>

效果圖如下：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python學習筆記整理總結【網路編程】【線程/進程/協程/IO多路模型/select/poll/epoll/selector】
    一、socket(單鏈接) 1、socket：應用層與TCP/IP協議族通信的中間軟體抽象層，它是一組介面。在設計模式中，Socket其實就是一個門面模式，它把複雜的TCP/IP協議族隱藏在Socket介面後面；也有人將socket說成ip+port，ip是用來標識互聯網中的一臺主機的位置，而por ...
  • Python-week3（基於Python3.0以上）
    1.元組 元組和列表很相似，最大的區別就是不可以對元組進行修改，因此也可將元組稱之為不可修改的列表。 在表示上列表使用中括弧，元組使用的是小括弧。都是用逗號將元素隔開。 有一點值得註意的是，創建只有一個元素的元組時需在元素後加逗號，如tup = (2,)。所以可見元組判別元組的依據是逗號而不是小括弧 ...
  • 洗禮靈魂，修煉python（69）--爬蟲篇—番外篇之feedparser模塊
    feedparser模塊 1.簡介 feedparser是一個Python的Feed解析庫，可以處理RSS ，CDF，Atom 。使用它我們可從任何 RSS 或 Atom 訂閱源得到標題、鏈接和文章的條目了。 RSS(Really Simple Syndication，簡易信息聚合)：是一種描述和同 ...
  • hdu_3123_GCC
    The GNU Compiler Collection (usually shortened to GCC) is a compiler system produced by the GNU Project supporting various programming languages. But ...
  • Java第一季
    1、Java常量的應用 語法：final 常量名 = 值； 舉一個簡單的例子 2、Java數組 Java中操作數組只需要四個步驟： （1）聲明數組 語法：數組類型[ ] 數組名； 或者數組類型 數組名[ ]; （2）分配空間 語法： 數組名 = new 數據類型 [ 數組長度 ]； 也可以直接合併 ...
  • 從0開始搭建自動部署環境（續）
    從0開始搭建自動部署環境（續） 前言 上一篇 "從0開始搭建自動部署環境" 雖然環境搭建起來了，但是配置少了一部分步驟。本來應該寫到上一篇中，但是這樣做篇幅過長了。另外，此篇會使用自動部署一個同步在Github上的Spring Boot項目為例，介紹如何使用該自動部署環境。 配置Global Too ...
  • 架構必會的性能指標及分析策略
    不管是java還是.net基礎設施必不可少。 MQ： 如果發現MQ是瓶頸。不管用的是rabbitmq還是kafka，其他的也好。作為生產者要確認超時時間、重試機制、非同步線程池。消費方要做兩件事：發現和解決。發現的主要是通過積壓閾值最快發現問題。解決的方法主要有：短期方案：增大線程數，增加伺服器。長期 ...
  • js插件實現一鍵複製功能
    clipboard.js 可以實現純 JS 的從瀏覽器複製文本到系統剪貼板的功能。 使用方法： 1. 下載 clipboard.js，併在頁面中引入該插件。clipboard.js 下載地址： https://github.com/zenorocha/clipboard.js 2. 需要複製的目標文 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類