表格

時間 2019-11-18

標籤表格简体版

原文原文鏈接

一表格簡化寫法到認識：tBodies,rows,cellsjavascript

結構：html

<table id="tab1" border="1" width="400">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>操做</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>海綿寶寶</td>
            <td>添加</td>
        </tr>
    </tbody>
</table>

    window.onload = function () {
        var oTab = document.getElementById("tab1");
//        var a = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML;
        //簡化寫法
        var a = oTab.tBodies[0].rows[0].cells[0].innerHTML;
        console.log(a);//1
    }

var a = oTab.tBodies[0].rows[0].cells[0].innerHTML;

二，表格的隔行變色：

oTab.tBodies[0].rows[i].style.background = i%2 ? 'green':'';

三，鼠標移入移出，表格的高亮：
爲了在鼠標移出的時避免覆蓋掉隔行的顏色，能夠先把當前行的顏色保存起來，等鼠標移出的時候在賦值給它。

    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oldBgColor = '';
        var i=0;
        //循環表格中全部的行
        for(i=0;i<oTab.tBodies[0].rows.length;i++){
            //隔行變色
            oTab.tBodies[0].rows[i].style.background = i%2 ? 'green':'';
            //表格高亮,鼠標移入移出
            oTab.tBodies[0].rows[i].onmouseover = function () {
                oldBgColor = this.style.background;//把當前行的背景色存到oldBgColor裏,由於他的背景色有綠色和""，
                this.style.background ="yellow";

            };
            oTab.tBodies[0].rows[i].onmouseout = function () {
                console.log(oldBgColor);//這裏的顏色是""，或者是綠色
                this.style.background = oldBgColor;
            };
        }
    }

四，表格的添加：java

var iNowId = oTab.tBodies[0].rows.length+1;//初始值，序號

var td = null;

    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        var oTxt = document.getElementById("txt1");
        var iNowId = oTab.tBodies[0].rows.length+1;//初始值
        oBtn.onclick = function () {
            if(oTxt.value){
                var tr = document.createElement("tr");
                var td = null;
                td = document.createElement("td");
                td.innerHTML = iNowId++;
                tr.appendChild(td);

                td = document.createElement("td");
                td.innerHTML = oTxt.value;
                tr.appendChild(td);

                td = document.createElement("td");
                td.innerHTML = '&nbsp';
                tr.appendChild(td);
                oTab.tBodies[0].appendChild(tr);

                oTxt.value ='';
            }else{
                alert("請填寫內容");
            }
        }
    }

五，刪除數組

td.getElementsByTagName("a")[0].onclick = function () {
   oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}

    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        var oTxt = document.getElementById("txt1");
        var iNowId = oTab.tBodies[0].rows.length+1;//初始值
        oBtn.onclick = function () {
            if(oTxt.value){
                var tr = document.createElement("tr");
                var td = null;
                td = document.createElement("td");
                td.innerHTML = iNowId++;
                tr.appendChild(td);

                td = document.createElement("td");
                td.innerHTML = oTxt.value;
                tr.appendChild(td);

                td = document.createElement("td");
                td.innerHTML = '<a href="#">刪除</a>';
                tr.appendChild(td);
                td.getElementsByTagName("a")[0].onclick = function () {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }

                oTab.tBodies[0].appendChild(tr);
                oTxt.value ='';
            }else{
                alert("請填寫內容");
            }
        }
    }

六，搜索：所謂搜索就是一行一行的比較；app

toLowerCase() ,toUpperCase()this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<table id="tab1" border="1" width="400">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>操做</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>2</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>3</td>
        <td>2233</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Abc</td>
        <td>添加</td>
    </tr>
    </tbody>
</table>
<input id="txt1" type="text">
<input id="btn1" type="button" value="搜索">
所謂搜索，就是一行一行去比較
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        var oTxt = document.getElementById("txt1");
        oBtn.onclick = function () {
            //循環全部的行，搜索姓名
            var i= 0;
            if(oTxt.value){
                for(i=0;i<oTab.tBodies[0].rows.length;i++){
                    var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sValueInTxt=oTxt.value.toLowerCase();
                    if(sValueInTab == sValueInTxt){//toLowerCase()搜索時忽略大小寫
                        oTab.tBodies[0].rows[i].style.background = "green";
                    }else{
                        oTab.tBodies[0].rows[i].style.background = "";
                    }
                }
            }else{
                alert("請輸入值");
            }
        }

        var a = "aaa";
        var b ="AAA";
        console.log(a==b);//false
        console.log(a.toLowerCase==b.toLowerCase);//true
       //忽略大小寫的辦法：
        //1,轉成全小寫，toLowerCase(); 2,轉成全大寫toUpperCase();
    }
</script>

7、多關鍵詞搜索：循環全部的行，搜索姓名。spa

slipt(' ') :暫且認爲用戶用空格來分隔關鍵詞code

.search != -1htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<table id="tab1" border="1" width="400">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>操做</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>2</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>3</td>
        <td>2233</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Abc</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>ab c</td>
        <td>添加</td>
    </tr>
    </tbody>
</table>
<input id="txt1" type="text">
<input id="btn1" type="button" value="搜索">
多關鍵詞搜索

通常搜索是根據後臺來完成。
由於不可能有大量的數據在客戶端，在客戶端篩選，而是經過後臺檢索完成之後反饋到客戶端來
</body>
</html>
<script type="text/javascript">
    //字符串拆分 split
    var str = "blue ar";
    var arr = str.split(' ');//用空格來拆分；
    console.log(arr[0]);
    console.log(arr[1]);
    var str2="blue is a person";
    var bFound = false;
    for(i=0;i<arr.length;i++){
        if(str2.search(arr[i]) !=-1){//若是str2中包含all裏面的某個詞
            bFound = true;
            break;
        }
    }
    console.log(bFound);

    var str3="abcdef";
    console.log(str3.search('bc'));//1,意味着bc是從1這個位置開始出現的。

    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        var oTxt = document.getElementById("txt1");
        oBtn.onclick = function () {
            //循環全部的行，搜索姓名
            var i= 0;
            if(oTxt.value){
                for(i=0;i<oTab.tBodies[0].rows.length;i++){
                    var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sValueInTxt=oTxt.value.toLowerCase();
                    var arr = sValueInTxt.split(' ');//暫且認爲用戶用空格來分隔關鍵詞
                    var bFound = false;
                    for(var j=0;j<arr.length;j++){
                        if(sValueInTab.search(arr[j])!=-1){
                            bFound =true;
                            break;
                        }
                    }
                    if(bFound){//toLowerCase()搜索時忽略大小寫
                        oTab.tBodies[0].rows[i].style.background = "green";
                    }else{
                        oTab.tBodies[0].rows[i].style.background = "";
                    }
                }
            }else{
                alert("請輸入值");
            }
        }
    }
</script>

8、移動blog

1,先從原來父級上移除；2，添加到新的父級。

案例1，從ul1移到ul2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ul1{background:green;}
        #ul2{background:yellow;}
    </style>
</head>
<body>
sort
操做：當我點擊按鈕的ul1裏第一個li塞到ul2裏
<input id="btn1" type="button" value="移動li">
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul id="ul2"></ul>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oBtn = document.getElementById("btn1");
        var oUl1 = document.getElementById("ul1");
        var oUl2 = document.getElementById("ul2");
        oBtn.onclick = function () {
            //把ul1裏面的li元素全都選出來，而後移動第0個li；
            var aLi = oUl1.getElementsByTagName("li");
            //appendChild實際上包含兩種功能；
            //1,先從原來父級上移除；2，添加到新的父級。
            oUl2.appendChild(aLi[0]);
        }
    }
</script>

從ul1移動到ul1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ul1{background:green;}
    </style>
</head>
<body>
sort
操做：當我點擊按鈕的ul1裏第一個li塞到ul2裏
<input id="btn1" type="button" value="移動li">
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oBtn = document.getElementById("btn1");
        var oUl1 = document.getElementById("ul1");

        oBtn.onclick = function () {
            //把ul1裏面的li元素全都選出來，而後移動第0個li；
            var aLi = oUl1.getElementsByTagName("li");
            //appendChild實際上包含兩種功能；
            //1,先從原來父級上移除；2，添加到新的父級。
            oUl1.appendChild(aLi[0]);

        }
    }
</script>

9、由移動激發的排序

排序原理：
1，選出最小的，添加到最後；
2，找出第二小，添加到倒數第二；
。。。。
排完了

排序過程：
1.轉成數組；
2.數組排序；
3.從新插入。
ex：li排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ul1{background:green;}
    </style>
</head>
<body>
<input id="btn1" type="button" value="排序li">
<ul id="ul1">
    <li>23</li>
    <li>14</li>
    <li>19</li>
    <li>40</li>
    <li>5</li>
</ul>
排序原理：
1，選出最小的，添加到最後；
2，找出第二小，添加到倒數第二；
。。。。
排完了
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oBtn = document.getElementById("btn1");
        var oUl1 = document.getElementById("ul1");
        oBtn.onclick = function () {
            //把ul1裏面的li元素全都選出來，而後移動第0個li；
            var aLi = oUl1.getElementsByTagName("li");
            //appendChild實際上包含兩種功能；
            //1,先從原來父級上移除；2，添加到新的父級。
            console.log(aLi);
            var arr = [];
            var i=0;
            //轉成數組
            for(i=0;i<aLi.length;i++){
                arr[i] = aLi[i];
            }
            console.log(arr);
            //數組排序
            arr.sort(function (li1,li2) {
                return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
            });
            //從新插入
            for(i=0;i<arr.length;i++){
                oUl1.appendChild(arr[i]);
            }

        }
    }
</script>

表格排序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<table id="tab1" border="1" width="400">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>操做</td>
    </thead>
    <tbody>
    <tr>
        <td>5</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>3</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2233</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Abc</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>2</td>
        <td>ab c</td>
        <td>添加</td>
    </tr>
    </tbody>
</table>
<input id="btn1" type="button" value="排序">
轉成數組，數組排序，從新插入
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
            var arr =[];
            var i=0;
            //轉成數組；
            for(i=0;i<oTab.tBodies[0].rows.length;i++){
                arr[i]=oTab.tBodies[0].rows[i];
            }
            //從新排序
            arr.sort(function (tr1,tr2) {
                return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
            })
            //從新插入
            for(i=0;i<arr.length;i++){
                oTab.tBodies[0].appendChild(arr[i]);
            }

        }
    }
</script>

10、升序，降序；

.sort()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<table id="tab1" border="1" width="400">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>操做</td>
    </thead>
    <tbody>
    <tr>
        <td>5</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>3</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2233</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>4</td>
        <td>海綿寶寶</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Abc</td>
        <td>添加</td>
    </tr>
    <tr>
        <td>2</td>
        <td>ab c</td>
        <td>添加</td>
    </tr>
    </tbody>
</table>
<input id="btn1" type="button" value="排序">
轉成數組，數組排序，從新插入
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oTab = document.getElementById("tab1");
        var oBtn = document.getElementById("btn1");
        var bAsc = true;//是不是升序。
        oBtn.onclick = function () {
            var arr =[];
            var i=0;
            //轉成數組；
            for(i=0;i<oTab.tBodies[0].rows.length;i++){
                arr[i]=oTab.tBodies[0].rows[i];
            }
            //從新排序
            arr.sort(function (tr1,tr2) {
                if(bAsc){
                    return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
                }else{
                    return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
                }
            })
            //從新插入
            for(i=0;i<arr.length;i++){
                oTab.tBodies[0].appendChild(arr[i]);
            }
//            if(bAsc){
//                bAsc = false;
//            }else{
//                bAsc = true;
//            }
            //簡化寫法
            bAsc =!bAsc;
        }
    }
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。