day04_案例五六

案例五：省市联动

<select id="country" onchange="add1(this.value);">
    <option value="0">--请选择--</option>
    <option value="中国">中国</option>
    <option value="日本">日本</option>
    <option value="美国">美国</option>
    <option value="德国">德国</option>
</select>
<select id="city"></select>
<script type="text/javascript">
    //二维数组存储数据
    var arr = new  Array(4);
    arr[0] = ["中国","南京","临洮","抚州","日喀则","哈密"];
    arr[1] = ["日本","北海道","大阪","广岛","长崎"];
    arr[2] = ["美国","纽约","底特津","休斯顿","华盛顿"];
    arr[3] = ["德国","慕尼黑","法兰克福","蓝堡","柏林"];
    function add1(val){
        /*
       1.遍历二维数组
        2.得到的也是一个数组（国家对应关系）
        3.拿到数组中的第一个值，与数组中的值作比较
        4.如果相同，获取数组中第一个值后面的元素
        5.得到city的select
        6.添加appendChild方法
                -创建option（三步）
         */
    //alert(val);
        //每次添加之前，判断city里面是否有option，如果有，删除
        //获取city的select
        var city1 = document.getElementById("city");
        //得到city里面的option
        var options1 = city1.getElementsByTagName("option");
        for(var m = 0;m<options1.length;m++){
            //得到每一个option
            var op = options1[m];
            //通过父节点删除option
            city1.removeChild(op);
            m--;
        }

        for(var i = 0;i<arr.length;i++){
            //得到二维数组里面的每一个数组
            var arr1 =  arr[i];
            //得到遍历后的数组的第一个值
            var firstValue = arr1[0];
            //判断传递过来的值和第一个值是否相等
            if(firstValue == val){
                //得到第一个值后面的元素
                //遍历arr1
               for(var j = 1;j<arr1.length;j++){
              var value1 = arr1[j];
              //alert(value1);
              //创建option、text、把text添加到option、option放入city1里
                   var option1 = document.createElement("option");
                   var text1 = document.createTextNode(value1);
                   option1.appendChild(text1);
                   city1.appendChild(option1);

               }

            }
        }
    }
</script>

案例六：动态生成表格

行：<input type="text" id="h"/>
列：<input type="text" id="l"/>
<br/>
<input type="button" value="生成" onclick="add1()">
<div id="divv"></div>
<script type="text/javascript">
    function add1() {
        /*
        * 1.得到输入的行列的值
        * 2.生成表格
        *       --循环行
        *       --在行里面循环单元格
        * 3.显示在页面上
        *       --把表格的代码设置在div里
        *       --使用innerHTML属性
        * */
        var h = document.getElementById("h").value;
        var l = document.getElementById("l").value;
        var tab = "<table border='1' bordercolor='blue'>";
        //循环行
        for(var i = 0;i<h;i++){
            tab += "<tr>";
            //循环单元格
            for(var j =0;j<l;j++){
                tab +="<td>wwwe </td>";
            }
            tab += "</tr>";
        }
        tab += "</table>";
        //alert(tab);
        var divv = document.getElementById("divv");
        divv.innerHTML = tab;
    }
</script>