JavaScript入门--表格隔行换色复选框全选省市联动

JavaScript入门案例：

使用JS完成表格的隔行换色
使用JS完成复选框全选效果
使用JS完成省市联动效果

1.开发中，需要使用表格陈列数据，数据太多不易查看，通常使用隔行换色来使用

　　表头标签：<thead></thead> <tbody></tbody>

　　事件：页面加载事件onload

　　获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

　　tbody里面的行数（row.length）for循环遍历tbody的行数获取奇数行和偶数行对遍历的角标对2取余

　　设置背景颜色（.style.backgroundColor）

　　步骤一：确定事件onload并为其绑定一个函数

　　步骤二：书写获取表格的函数

　　步骤三：获取tbody里面的行数

　　步骤四：对tbody里的行数遍历

　　步骤五：获取奇数行和偶数行

　　步骤六：分别对奇数行和偶数和设置背景颜色

代码实现

js代码：

<script>
    window.onload = function(){
        //1.获取表格
        var tblEle = document.getElementById("tbl");
        //2.获取表格中tbody里面的行数(长度)
        var len = tblEle.tBodies[0].rows.length;
        //alert(len);
        //3.对tbody里面的行进行遍历
        for(var i=0;i<len;i++){
            if(i%2==0){
                //4.对偶数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
            }else{
                //5.对奇数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
            }
        }
    }
</script>

html代码：

　　给table里面添加一个id=“tbl”,在table里面添加新标签<thead></thead>和<tbody></tbody>

2.实现一个表格的高亮显示

　　鼠标事件：

　　　　onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。

　　　　onclick/ondblclick:鼠标单击和双击事件

　　　　onkeydown/onkeypress：搜索引擎使用较多

　　　　onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。

　　　　onmouseover/onmouseout/onmousemove：购物网站商品详情页。

　　　　onsubmit：表单提交事件，有返回值，控制表单是否提交。

　　　　onchange:当用户改变内容的时候使用这个事件(二级联动)

　　步骤一：确定鼠标事件(onmouseover和onmouseout)分别为其绑定一个函数

　　步骤二：获取鼠标移上去的那行对其设置背景颜色

相关代码：

js代码：

<script>
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("checkAll");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
            //3.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>

html代码：

　　下面所有的复选框：<td><input type="checkbox" name="checkOne"/></td>

4.我们希望在注册页面中添加一个字段，用户选择一个具体省份，在其后面动态的加载该省份的城市。

　　事件：（onchange）

　　使用一个二维数组来存储省份和城市（二维数组的创建）

　　获取该用户选择的省份（使用传参的方法：this,value）

　　遍历数组（获取省份与用户选择的省份相比较，如果相同，继续遍历该省份下的城市）

　　创建文本节点和元素节点进行添加操作

　　createTextNode()

　　createElement()

　　appendChild()

　　步骤一：确定事件（onchange）并为其绑定一个函数

　　步骤二：创建一个二维数组用于存储省份和城市

　　步骤三：获取用户选择的省份

　　步骤四：遍历二维数组中的省份

　　步骤五：将遍历的省份与用户选择的省份进行比较

　　步骤六：如果相同，遍历该省份下的城市

　　步骤七：创建城市文本节点

　　步骤八：创建option元素节点

　　步骤九：将城市文本节点添加到option元素节点中

　　步骤十：获取第二个下拉列表，将option元素节点添加进去

　　步骤十一：每次操作前清空第二个下拉列表的option内容

相关代码:

js代码：

<script>
    //1.创建一个二维数组用于存储省份和城市
    var cities = new Array(3);
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    
    function changeCity(val){
        
        //7.获取第二个下拉列表
        var cityEle = document.getElementById("city");
        
        //9.清空第二个下拉列表的option内容
        cityEle.options.length=0;
        
        //2.遍历二维数组中的省份
        for(var i=0;i<cities.length;i++){
            //注意，比较的是角标
            if(val==i){
                //3.遍历用户选择的省份下的城市
                for(var j=0;j<cities[i].length;j++){
                    //alert(cities[i][j]);
                    //4.创建城市的文本节点
                    var textNode = document.createTextNode(cities[i][j]);
                    //5.创建option元素节点
                    var opEle = document.createElement("option");
                    //6.将城市的文本节点添加到option元素节点
                    opEle.appendChild(textNode);
                    //8.将option元素节点添加到第二个下拉列表中去
                    cityEle.appendChild(opEle);
                }
            }
        }
    }
</script>

html代码：

<select onchange="changeCity(this.value)">
    <option>--请选择--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>
<select id="city">
    
</select>

JavaScript的DOM操作

　　Document:整个html文件都成为一个document文档

　　Element:所有的标签都是Element元素

　　Attribute：标签里面的属性

　　Text：标签中间夹着的内容为text文本

　　Node:document、element、attribute、text统称为节点node.

Document对象

　　每个载入浏览器的HTML文档都会变成Document对象 getElementById() getElementByName() getElementByTagName() 操作获取元素

　　创建文本节点：document.createTextNode()

　　创建元素节点：document.createElement()

Element对象

　　所有html页面中的标签都是element元素

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

Attribute对象

　　所有html页面中所有标签里面的属性都是attribute

DOM练习：

　　动态添加文本节点，在页面中使用列表显示一些城市

　　<ul>

　　</ul>

　　希望可以通过一个按钮动态的实现添加城市

　　事件 onclick

　　获取ul元素节点

　　创建一个城市文本节点

　　创建一个li元素节点

　　将文本节点添加到li元素节点中

　　使用element方法里面的appendchild()来添加一个节点

match()	找到一个或多个正则表达式的匹配。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。

安然a

一只好玩的大三狗

JavaScript入门--表格隔行换色复选框全选省市联动

JavaScript入门案例：

公告

安然a

一只好玩的大三狗

JavaScript入门--表格隔行换色 复选框全选 省市联动

JavaScript入门案例：

公告

JavaScript入门--表格隔行换色复选框全选省市联动