JS學習筆記07-表格與表單應用

原創 疯狂的地球人 2020-06-21 08:07

文章目錄

一、表格應用

以下測試均採用該HTML框架:

<body>
    <table id="tab1" border="1px" style="width: 500px;">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年齡</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>張三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>35</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>31</td>
            </tr>
            <tr>
                <td>4</td>
                <td>馬六</td>
                <td>25</td>
            </tr>
            <tr>
                <td>5</td>
                <td>小明</td>
                <td>29</td>
            </tr>
        </tbody>
    </table>
</body>

1.1 獲取

在傳統的JS當中如果我們需要獲取一個單元格的內容，如果不加ID我們會使用下面這種方法:
先選中table,再選中tbody，再選中tr，再選中td，都是使用的getElementByTagName

<script>
    window.onload=function(){
        var tab = document.getElementById('tab1');
        //李四
        alert(tab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
    }
</script>

但是JS中有專門針對選擇表格的屬性：例如

alert(tab.tBodies[0].rows[1].cells[1].innerHTML);

效果四一模一樣的，得出以下結論：

1.1.1 .tBodies[] 選中第幾個tbody

1.1.2 .rows[] 選中第幾個tr

1.1.3 .cells[] 選中第幾個td

另外，啊hi有

1.1.4 .tHead 選中表頭

1.1.5 .tFoot 選中表尾

需要注意的是，這表格只有一個表頭和表尾，所以沒有複數S 而其他三個有複數S，所以他們是數組，而這兩個只是單一的。

1.2 隔行變色

需要注意的是鼠標移出的時候。要返回原來的顏色，此處用了一個變量來保存當前對象的顏色

<script>
    window.onload=function(){
        var tab = document.getElementById('tab1');
        var oldColor = '';

        for(var i=0;i<tab.tBodies[0].rows.length;i++){
            tab.tBodies[0].rows[i].onmouseover=function(){
                oldColor=this.style.background;
                this.style.background='green';
            }
            tab.tBodies[0].rows[i].onmouseout=function(){
                this.style.background=oldColor;
            }
            if(i%2 == 0){
                tab.tBodies[0].rows[i].style.background= '#ccc';
            }else{
                tab.tBodies[0].rows[i].style.background= 'white';
            }
        }
    }
</script>

效果:
在這裏插入圖片描述

1.3 添加、刪除一行

添加使用方法 .createElement();
刪除使用方法 .removeChild();

1.4 搜索 高亮顯示

思路：使用循環判斷，表格內的元素是否與搜索框內的相等，如果相等 則設置background,不相等 則設置爲空格。

<script>
    window.onload=function(){
        var tab=document.getElementById('tab1');
        var txt = document.getElementById('name');
        var btn = document.getElementById('btn1');

        btn.onclick=function(){
            for(var i=0;i<tab.tBodies[0].rows.length;i++){
                var tab_text = tab.tBodies[0].rows[i].cells[1].innerHTML;
                var input_text = txt.value;
                if(tab_text==input_text){
                    tab.tBodies[0].rows[i].style.background='green';
                }else{
                    tab.tBodies[0].rows[i].style.background='';
                }
            }
        }
        
    }
</script>

1.4.1 .toLowerCase() 全部轉換爲小寫

此處我們把兩邊都轉化爲小寫，就可以忽略大小寫的問題了

<script>
    window.onload=function(){
        var tab=document.getElementById('tab1');
        var txt = document.getElementById('name');
        var btn = document.getElementById('btn1');

        btn.onclick=function(){
            for(var i=0;i<tab.tBodies[0].rows.length;i++){
                var tab_text = tab.tBodies[0].rows[i].cells[1].innerHTML;
                var input_text = txt.value;
                if(tab_text.toLowerCase()==input_text.toLowerCase()){
                    tab.tBodies[0].rows[i].style.background='green';
                }else{
                    tab.tBodies[0].rows[i].style.background='';
                }
            }
        }
        
    }
</script>

在這裏插入圖片描述

1.4.2 .search() 模糊搜索

實例:

<script>
    var str = 'abcdefghijklmnopqrstuvwxyz';
    alert(str.search('e'));//4
    alert(str.search('bcde'));//1
    alert(str.search('test'));//-1
</script>

1.4.3 split() 把字符串拆分爲數組

語法: .spalit(參數)
說明: split把對應的字符串按照指定的參數拆分成數組
例如:

<script>
    var str='abc 123 張三';

    var arr = str.split(' ');
    alert(arr.length);//3
    alert(arr);//abc,123,張三
</script>

實例:
此處我們用於匹配 空格間隔 的輸入

<body>
    姓名:<input id="name" type="text">
    <input id="btn1" type="button" value="搜索">
    <table id="tab1" border="1px" style="width: 500px;">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年齡</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>25</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>張三</td>
                <td>35</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>35</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>31</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>馬六</td>
                <td>25</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>李偉</td>
                <td>29</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>趙四</td>
                <td>29</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>
        </tbody>
    </table>
</body>

<script>
    window.onload=function(){
        var tab=document.getElementById('tab1');
        var txt = document.getElementById('name');
        var btn = document.getElementById('btn1');

        btn.onclick=function(){
            for(var i=0;i<tab.tBodies[0].rows.length;i++){

                var tab_text = tab.tBodies[0].rows[i].cells[1].innerHT![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200427215952460.gif)
ML.toLowerCase();//轉換爲小寫
                var input_text = txt.value.toLowerCase();
                var arr = input_text.split(' ');//根據空格拆分 匹配空格間隔的輸入

                tab.tBodies[0].rows[i].style.background='';
                for(var j=0;j<arr.length;j++){
                    if(tab_text.search(arr[j])!=-1){
                        tab.tBodies[0].rows[i].style.background='green';
                    }                
                }                
            }
        }        
    }
</script>

效果圖:
在這裏插入圖片描述

1.5 搜索 篩選

設計思路：點擊搜索後，先讓所有單元格隱藏，只有滿足要求才顯示。

<script>
    window.onload=function(){
        var tab=document.getElementById('tab1');
        var txt = document.getElementById('name');
        var btn = document.getElementById('btn1');

        btn.onclick=function(){
            for(var i=0;i<tab.tBodies[0].rows.length;i++){

                var tab_text = tab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//轉換爲小寫
                var input_text = txt.value.toLowerCase();
                var arr = input_text.split(' ');//根據空格拆分 匹配空格間隔的輸入

                tab.tBodies[0].rows[i].style.display='none';
                for(var j=0;j<arr.length;j++){
                    if(tab_text.search(arr[j])!=-1){
                        tab.tBodies[0].rows[i].style.display='block';
                    }                
                }                
            }
        }        
    }
</script>

在這裏插入圖片描述

1.5 li的排序

1.5.1 li移動到另一個li

思路：首先需要明白，appendChild是分兩步走的，第一步 是把元素從原有父級刪除，第二步纔是添加到新的父級
1、先把所有的li獲取到，然後使用sort方法，把li裏邊的數字排序。
2、把已經排序好的添加到當前ul的末尾。實際上是移動，先把最小的添加到末尾，再依次添加

<script>
    window.onload=function(){
        var ul1=document.getElementById('ul1');
        var ul2=document.getElementById('ul2');
        var btn1=document.getElementById('btn1');

        btn1.onclick=function(){
            var ul_li = ul1.getElementsByTagName('li');

            // aLi.sort();//報錯

            var arr=[];

            for(var i =0;i<ul_li.length;i++){
                arr[i]=ul_li[i];
            }
            //這裏數組裏邊已經排好序了，但是還沒有更新ul裏邊的位置
            arr.sort(function(li1,li2){
                var n1=parseInt(li1.innerHTML);
                var n2=parseInt(li2.innerHTML);

                return n1-n2;
            });
            //這裏按照從小到大的順序，追加到數組裏邊
            for(var i=0;i<arr.length;i++){
                //.appendChild方法 1、先把元素從原有父級上刪除 2、再添加到新的父級 （相當於移動）
                ul1.appendChild(arr[i]);
            }
        }
    }
</script>

效果圖:
在這裏插入圖片描述

1.6 表格排序

原理同上。

<body>
    <input id="btn1" type="button" value="排序">
    <table id="tab1" border="1px" style="width: 500px;">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年齡</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>3</td>
                <td>Blue</td>
                <td>25</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>張三</td>
                <td>35</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>李四</td>
                <td>35</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>王五</td>
                <td>31</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>馬六</td>
                <td>25</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>李偉</td>
                <td>29</td>
                <td><a href="javascript:;"></a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>趙四</td>
                <td>29</td>
                <td><a href="javascript:;"></a></td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    window.onload=function(){
        var tab=document.getElementById('tab1');
        var btn = document.getElementById('btn1'); 

        btn.onclick=function(){
            var arr=[];

            for(var i=0;i<tab.tBodies[0].rows.length;i++){
                arr[i]=tab.tBodies[0].rows[i];
            }
            arr.sort(function(tr1,tr2){
                var n1 = parseInt(tr1.cells[0].innerHTML);
                var n2 = parseInt(tr2.cells[0].innerHTML);

                return n1-n2;
            });

            for(var i=0;i<arr.length;i++){
                tab.tBodies[0].appendChild(arr[i]);
            }
        }

    }
</script>

效果:
在這裏插入圖片描述

二、表單應用

2.1 onsubmit();

當表單提交是的時候觸發 onsubmit();

2.2 onreset();

當表單發生重置的時候觸發 onreset();

<body>
    <form id="form" action="https://www.baidu.com">
        <!-- 後臺是通過name來獲取數據的 -->
        用戶名:<input type="text" name="user">
        密碼: <input type="password" name="pwd">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>

<script>
    window.onload=function(){
        var form = document.getElementById('form');

        form.onsubmit=function (){
            alert('submit');
        }
        form.onreset=function (){
            alert('reset');
        }
    }
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

js筆記----動態顯示時間

代碼： <!DOCTYPE html> <html> <head> <title>動態顯示時間</title> </head> <body> <script > function clock(){ var str="現在

02be55f 2020-07-01 23:26:25

【JS學習筆記四】：axios上傳文件

參考：https://juejin.im/post/5cff13ab6fb9a07ee1691e82 首先，在html的input中添加change事件，每次上傳文件（不同名），都會觸發該事件 <!-- v-on:是vu

Jalon2015 2020-06-25 01:15:25

php ci 去掉index.php

  1.打開apache的配置文件，conf/httpd.conf ： LoadModule rewrite_module modules/mod_

周胜超 2020-06-24 01:01:53

JS學習筆記-判斷文本域當中滾動條的位置、滾動條下拉至底部纔可以提交

老規矩，廢話不多說，先來看效果： CV即可直接使用，有什麼在這裏插入代碼片問題可以留言或者私信，筆者看到都會第一時間回覆的。 代碼： <!DOCTYPE html> <html> <head> <meta http-equiv=

疯狂的地球人 2020-06-23 03:13:12

JS學習筆記08-瀏覽器BOM

文章目錄一、BOM基礎1.1 打開窗口1.2 關閉窗口1.3 常用屬性1.3.1 window.navigator.userAgent 瀏覽器信息 客戶端信息1.3.2 window.location url信息1.4 補充知識

疯狂的地球人 2020-06-21 08:07:15

JS學習筆記06-創建、插入、刪除節點

文章目錄一、創建DOM元素1.1、createElement('標籤名')；1.2、appendChild(); 添加到末尾1.3、再對創建的li添加一點文字二、insertBefore 插入元素三、removeChild() 刪

疯狂的地球人 2020-06-21 08:07:15

JS學習筆記09-運動基礎1

文章目錄一、運動基礎1.1 通過定位的left、top讓DIV動起來二、側邊欄2.1 offsetLeft 元素邊框外側到瀏覽器窗口內側的距離三、淡入淡出圖片3.1 opacity:0-1; 設置元素的透明度 一、運動基礎 1

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記13-事件基礎-event對象

文章目錄一、event對象和事件冒泡1.1 什麼是event對象1.2 document1.3 event.clientX event.clientY 鼠標點擊的X座標和Y座標1.4 事件冒泡1.5 event.cancelBub

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記16-精通Ajax

文章目錄一、 什麼是Ajax？二、 Ajax的執行過程2.1 創建Ajax對象2.2 .open() 連接到服務器2.3 .send() 發送請求2.4 .onreadystatechange 事件 接收返回值 一、 什麼是Aja

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記14-事件中級 實現可拖動DIV

文章目錄一、默認行爲(默認事件)1.1 oncontextmenu 右鍵菜單1.2 阻止鍵盤錄入1.3 實例 自定義右鍵菜單1.4 實例 只能輸入數字的輸入框二、拖拽(Drag)2.1 onmouseclick 鼠標點擊2.2 o

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記10-setInterval()基礎02

文章目錄一、緩衝運動1.1 補充知識1.1.1 document.title 可以修改頁面的標題1.1.2 Math.ceil() 向上取整1.1.3 Math.floor() 向下取整1.1.4 Math.round() 四捨五

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記12-基本運動框架：JS實現變寬、變高、改變位置、改變透明度等

文章目錄一、原生JS + 簡單Json實現運動框架二、效果示例：讓DIV同時邊寬、變高、變淡(透明度) 一、原生JS + 簡單Json實現運動框架 可實現，變寬 變高，改變位置，改變顏色，改變透明度 等等。 /* 功能：獲取元素

疯狂的地球人 2020-06-21 08:07:04

JS學習筆記-三個綁定事件的方法

文章目錄一、直接在HTML中綁定事件在二、在JavaScript中指定2.1 事件覆蓋三、addEventListener()3.1 改寫成匿名函數 一、直接在HTML中綁定事件在 注意：這種方法不推介使用，除了直觀一點，幾乎沒啥

疯狂的地球人 2020-06-21 08:07:04

學習Node時遇到的回調函數問題

怎麼獲取異步操作的結果或者說返回值？ 例如下面這個函數 function test(){ setTimeout(function(){ var data = 'hello word' },1000) } 此時要如何獲取這

廖子默 2020-06-19 07:37:25

使用jquery iframe 動態實現模態窗口

需求，單擊某個入口時間後觸發權限判斷，沒權限用戶彈出註冊權限窗口（保持頁面，彈出窗口模態，背景色自定義等）。符合權限進行跳轉與其他窗口彈出或提示。 <script type="text/javascript"> function sh

十四月的清晨 2020-06-16 03:52:45