JSDay01--Homework(表格当前行点击变色,下拉框省市级联)

1、创建table表格,要求:

    点击某一行,则该行变色(选中)。

答:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script>
        var rows = document.getElementsByName("row");

        function changeBackground(row) {
            for (var i = 0; i < rows.length; i++) {
                if (rows[i].style.backgroundColor != "white") { //寻找已变色的行,找到后将此行变回白色并跳出循环,否则继续寻找
                    rows[i].style.backgroundColor = "white";
                    break;
                }
            }
            row.style.backgroundColor = "#aabbcc";
        }
    </script>
</head>

<body>
    <table border="1">
        <tbody>
            <tr name="row" οnclick="changeBackground(this)">
                <td>第1行</td>
            </tr>
            <tr name="row" οnclick="changeBackground(this)">
                <td>第2行</td>
            </tr>
            <tr name="row" οnclick="changeBackground(this)">
                <td>第3行</td>
            </tr>
            <tr name="row" οnclick="changeBackground(this)">
                <td>第4行</td>
            </tr>
            <tr name="row" οnclick="changeBackground(this)">
                <td>第5行</td>
            </tr>
        </tbody>
    </table>
</body>

</html>


2、用下拉列表框实现省市级联效果。

重点语法:

<select>
    <option value=""></option>
</select>

 提示:

使用数组

 答:
<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8" />
    <title>表单验证</title>
    <script type="text/javascript">
        var country = new Object();
        country['北京市'] = new Array('北京市区', '北京市辖区');
        country['上海市'] = new Array('上海市区', '上海市辖区');
        country['天津市'] = new Array('天津市区', '天津市辖区');
        country['重庆市'] = new Array('重庆市区', '重庆市辖区');
        country['河北省'] = new Array('石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口', '承德市', '廊坊市', '沧州市', '衡水市', '邢台市');
        country['山西省'] = new Array('太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市');
        country['辽宁省'] = new Array('沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市');
        country['吉林省'] = new Array('长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边州', '长白山管委会');
        country['黑龙江省'] = new Array('哈尔滨市', '齐齐哈尔市', '大庆市', '佳木斯市', '牡丹江市', '七台河市', '双鸭山市', '黑河市', '鸡西市', '伊春市', '绥化市', '鹤岗市', '加格达奇市');
        country['江苏省'] = new Array('南京市', '苏州市', '无锡市', '常州市', '南通市', '扬州市', '镇江市', '泰州市', '盐城市', '连云港市', '宿迁市', '淮安市', '徐州市');
        country['浙江省'] = new Array('杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市');
        country['安徽省'] = new Array('合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '巢湖市', '六安市', '亳州市', '池州市', '宣城市');
        country['福建省'] = new Array('福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市');
        country['江西省'] = new Array('南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市');
        country['山东省'] = new Array('济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市');
        country['河南省'] = new Array('郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市');
        country['湖北省'] = new Array('武汉市', '黄石市', '十堰市', '荆州市', '宜昌市', '襄樊市', '鄂州市', '荆门市', '孝感市', '黄冈市', '咸宁市', '随州市');
        country['湖南省'] = new Array('长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市');
        country['广东省'] = new Array('广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市');
        country['海南省'] = new Array('文昌市', '琼海市', '万宁市', '五指山市', '东方市', '儋州市');
        country['四川省 '] = new Array('成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市');
        country['贵州省'] = new Array('贵阳市', '六盘水市', '遵义市', '安顺市');
        country['云南省'] = new Array('昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市');
        country['陕西省'] = new Array('西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市');
        country['甘肃省'] = new Array('兰州市', '金昌市', '白银市', '天水市', '嘉峪关市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市');
        country['青海省'] = new Array('西宁市');
        country['台湾省'] = new Array('台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市');
        country['广西壮族自治区'] = new Array('南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市');
        country['内蒙古自治区'] = new Array('呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市');
        country['西藏自治区'] = new Array('拉萨市');
        country['宁夏回族自治区'] = new Array('银川市', '石嘴山市', '吴忠市', '固原市', '中卫市');
        country['新疆维吾尔自治区'] = new Array('乌鲁木齐市', '克拉玛依市');
        country['香港特别行政区'] = new Array('台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市');

        function option(province, city) {
            if (province.value == '0') return;
            if (typeof (country[province.value]) == 'undefined') return;
            for (i = 0; i < country[province.value].length; i++) {
                city.options[i + 1] = new Option();
                city.options[i + 1].text = country[province.value][i];
                city.options[i + 1].value = country[province.value][i];
            }
            city.options[0].text = "请选择市区";
        }
    </script>
</head>

<body>
    <!-- 在“option”中,可以设置下拉框的形式,如 style=" width:10%; height:30px;line-height:30px; "  -->
    <select οnchange="option(this,document.getElementById('city'));">
        <option value="请选择省份">请选择省份</option>
        <option value="北京市">北京市</option>
        <option value="天津市">天津市</option>
        <option value="上海市">上海市</option>
        <option value="重庆市">重庆市</option>
        <option value="河北省">河北省</option>
        <option value="山西省">山西省</option>
        <option value="辽宁省">辽宁省</option>
        <option value="吉林省">吉林省</option>
        <option value="黑龙江省">黑龙江省</option>
        <option value="江苏省">江苏省</option>
        <option value="浙江省">浙江省</option>
        <option value="安徽省">安徽省</option>
        <option value="福建省">福建省</option>
        <option value="江西省">江西省</option>
        <option value="山东省">山东省</option>
        <option value="河南省">河南省</option>
        <option value="湖北省">湖北省</option>
        <option value="湖南省">湖南省</option>
        <option value="广东省">广东省</option>
        <option value="海南省">海南省</option>
        <option value="四川省">四川省</option>
        <option value="贵州省">贵州省</option>
        <option value="云南省">云南省</option>
        <option value="陕西省">陕西省</option>
        <option value="甘肃省">甘肃省</option>
        <option value="青海省">青海省</option>
        <option value="台湾省">台湾省</option>
        <option value="广西壮族自治区">广西壮族自治区</option>
        <option value="内蒙古自治区">内蒙古自治区</option>
        <option value="西藏自治区">西藏自治区</option>
        <option value="宁夏回族自治区">宁夏回族自治区</option>
        <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
        <option value="香港特别行政区">香港特别行政区</option>
        <option value="澳门特别行政区">澳门特别行政区</option>
    </select>
    <select name="city" id="city" "> <option value="请选择市区 ">请选择市区</option> </select>  
 </body>
</html>

Copyright © 2018 Jin Hanquan. All rights reserved.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值