Table表格的二级联动
用Table实现二级联动
头一次听说二级联动这个概念，悔恨以前做课设的时候对这些东西浅浅略过。
网上搜寻一番后发现大多数例子都是对下拉选框的二级联动，最常用的应该就是省市区的选择了吧。
【复现select下拉选框的二级联动】
两个下拉选框，一个定义市一个定义区；区随市的变化而变化。
为市对应的下拉列表定义触发事件onchange(),当其中内容发生变化时触发函数。
<body onload="initProvince()"><!--onchange 内容发送变化触发--><select id="province" onchange="changeCity()"><option>-请选择-</option></select><select id="city"><option value="">-请选择-</option></select></body>
下面是js脚本：
定义了一个二维数组，注意js中的二维数组下表允许使用字符串。（有点意思哦）
initProvince()：初始化函数。循环获取array中的元素，对 “市” 对应的下拉列表进行初始化。创建option时两个i是value和选项内容。
changeCity()：当 “市” 对应的下拉列表内容变化时，也就是对 “市” 进行了重新选择时，此函数被触发。
获取重新选择后的市的值（市名），并且清空区对应的下拉列表。
遍历二维数组中 “市” 对应的数组，获取“市”对应的各个区，对区对应的下拉列表进行重建。
<script type="text/javascript">var array = new Array(); //数组//js中的二维数组的下标可以使字符串array['南京'] = ["江宁区", "鼓楼区", "雨花台区"];array['常州'] = ["新北区", "武进区", "天宁区"];array['西安'] = ["未央区", "莲湖区", "长安区"];//java:array[0] = {"",""};function initProvince() {for(var i in array) {var provinceObj = document.getElementById("province");//创建一个选项/*** 参数一是：展示数据* 参数二是：value属性的值*/var option = new Option(i, i); //jquery provinceObj.add(option); //把创建的option添加到下拉列表中}}function changeCity() {var provinceName = document.getElementById("province").value; //得到第一个下拉列表的值var city = document.getElementById("city");//清空第二个下拉列表//方法一//city.innerHTML = "";//方法二city.options.length = 1;for(var p in array) {if(p == provinceName) {//遍历每个省份的城市for(var c in array[p]) {//创建一个optionvar option = new Option(array[p][c], array[p][c]);var city = document.getElementById("city");city.add(option);}}}}
</script>
效果如下图：
【构建Table表格的二级联动】
可能是table二级联动实用性不大吧，网上相关资源实现table二级联动可以直接拿来用的代码寥寥无几。下面个人用极其简陋的方式实现简单的table二级联动。
定义了一个表格，为第一行的每个单元格定义了changeCity()函数，鼠标移至单元格时触发此函数。
initProvince()：页面载入时对表格进行初始化。
<body onload="initProvince()"><table id="Table" border="1"><tr id="province"><td onmouseover="changeCity1()" id="BJ">BeiJing</td><td onmouseover="changeCity2()" id="SD">ShanDong</td><td onmouseover="changeCity3()" id="QD">QingDao</td></tr><tr id="city"><td></td><td></td><td></td></tr></table></body>
下面是js代码：
array的定义用法和上面一样。初始化函数对table第二行进行统一初始化，显示为“- - -”。
changeCity()函数中获取table第二行的单元格，为其一一赋值。
同时更改第一行“省”对应单元格的背景色，达到聚焦效果。
下面这两个方法不查手册我还真用不出来。
document.getElementById("Table").rows[1].cells;
document.getElementById("BJ").style.backgroundColor="dodgerblue";
<script type="text/javascript">var array = new Array();array['BeiJing'] = ["朝阳区","昌平区","海淀区"];array['ShanDong'] = ["青岛","烟台","泰安"];array['HeNan'] = ["郑州","洛阳","开封"];function initProvince(){var secondTab = document.getElementById("Table").rows[1].cells;//secondTab[0].innerHTML="dnwd";for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = "---";}}function changeCity1(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['BeiJing'][i];}document.getElementById("BJ").style.backgroundColor="dodgerblue";document.getElementById("SD").style.backgroundColor="white";document.getElementById("QD").style.backgroundColor="white";}function changeCity2(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['ShanDong'][i];}document.getElementById("BJ").style.backgroundColor="white";document.getElementById("SD").style.backgroundColor="dodgerblue";document.getElementById("QD").style.backgroundColor="white";}function changeCity3(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['HeNan'][i];}document.getElementById("BJ").style.backgroundColor="white";document.getElementById("SD").style.backgroundColor="white";document.getElementById("QD").style.backgroundColor="dodgerblue";}</script>
最终效果：
完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** */var array = new Array();array['BeiJing'] = ["朝阳区","昌平区","海淀区"];array['ShanDong'] = ["青岛","烟台","泰安"];array['HeNan'] = ["郑州","洛阳","开封"];function initProvince(){var secondTab = document.getElementById("Table").rows[1].cells;//secondTab[0].innerHTML="dnwd";for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = "---";}}function changeCity1(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['BeiJing'][i];}document.getElementById("BJ").style.backgroundColor="dodgerblue";document.getElementById("SD").style.backgroundColor="white";document.getElementById("QD").style.backgroundColor="white";}function changeCity2(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['ShanDong'][i];}document.getElementById("BJ").style.backgroundColor="white";document.getElementById("SD").style.backgroundColor="dodgerblue";document.getElementById("QD").style.backgroundColor="white";}function changeCity3(){var secondTab = document.getElementById("Table").rows[1].cells;for(var i=0;i<secondTab.length;i++){secondTab[i].innerHTML = array['HeNan'][i];}document.getElementById("BJ").style.backgroundColor="white";document.getElementById("SD").style.backgroundColor="white";document.getElementById("QD").style.backgroundColor="dodgerblue";}</script></head><body onload="initProvince()"><table id="Table" border="1"><tr id="province"><td onmouseover="changeCity1()" id="BJ">BeiJing</td><td onmouseover="changeCity2()" id="SD">ShanDong</td><td onmouseover="changeCity3()" id="QD">QingDao</td></tr><tr id="city"><td></td><td></td><td></td></tr></table></body></html>
最后：
由于对CSS、HTML等都在入门水平（可能还没有入门），实现的过程很简陋，功能也很简单。
若有更好的方法思路，恳请赐教。
也许用AngularJS会更简单一点，毕竟数据绑定超强。但是我不太会哦~~
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！