表格

一表格简化写法到认识：tBodies,rows,cells

结构：

<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;
            };
        }
    }

四，表格的添加：

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("请填写内容");
            }
        }
    }

六，搜索：所谓搜索就是一行一行的比较；

toLowerCase() ,toUpperCase()

<!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>

七、多关键词搜索：循环所有的行，搜索姓名。

slipt(' ') :暂且认为用户用空格来分隔关键词

.search != -1

<!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>

八、移动

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>

九、由移动激发的排序

排序原理：
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>

十、升序，降序；

.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>

posted @ 2016-11-11 19:25 最爱小虾阅读(182) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

最爱小虾

表格

公告