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>

JSDay01--Homework(表格当前行点击变色，下拉框省市级联)相关推荐

Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
点击BootStrap下拉框无反应
根本原因就是js的问题,因为这个是绑定的点击事件,js代码监听事件,收到相应事件之后才会做出响应,如果点击没反应,说明js出了问题首先检查jquery和bootstrap的js文件是否已经引入如果 ...
点击新建下拉框选择
效果图转载于:https://www.cnblogs.com/320321ABab/p/10869741.html
element ui 中级联选择器，点击完下拉框收回
在el-cascader标签中添加ref属性,$refs中添加toggleDropDownVisible()方法
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...
layui表格下拉框无法显示
layui表格下拉框无法显示开发工具与关键技术:java 作者:彭浩达撰写时间:2019年 7月 4日 $(function () { layui.use(['layer', 'table'], ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...

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

JSDay01--Homework(表格当前行点击变色，下拉框省市级联)相关推荐

最新文章

热门文章