html表格联动,Table表格的⼆级联动
⽤Table实现⼆级联动
头⼀次听说⼆级联动这个概念，悔恨以前做课设的时候对这些东西浅浅略过。
⽹上搜寻⼀番后发现⼤多数例⼦都是对下拉选框的⼆级联动，最常⽤的应该就是省市区的选择了吧。
【复现select下拉选框的⼆级联动】
两个下拉选框，⼀个定义市⼀个定义区；区随市的变化⽽变化。
为市对应的下拉列表定义触发事件onchange()，当其中内容发⽣变化时触发函数。
-请选择-
-请选择-
下⾯是js脚本：
定义了⼀个⼆维数组，注意js中的⼆维数组下表允许使⽤字符串。(有点意思哦)
initProvince()：初始化函数。循环获取array中的元素，对 “市” 对应的下拉列表进⾏初始化。创建option时两个i是value和选项内容。changeCity()：当 “市” 对应的下拉列表内容变化时，也就是对 “市” 进⾏了重新选择时，此函数被触发。
获取重新选择后的市的值(市名)，并且清空区对应的下拉列表。
遍历⼆维数组中 “市” 对应的数组，获取“市”对应的各个区，对区对应的下拉列表进⾏重建。
var array = new Array(); //数组
//js中的⼆维数组的下标可以使字符串
array['南京'] = ["江宁区", "⿎楼区", "⾬花台区"];
array['常州'] = ["新北区", "武进区", "天宁区"];
array['西安'] = ["未央区", "莲湖区", "长安区"];
//java:array[0] = {"",""};
function initProvince() {
for(var i in array) {
var provinceObj = ElementById("province");
//创建⼀个选项
/**
* 参数⼀是：展⽰数据
* 参数⼆是：value属性的值
*/
var option = new Option(i, i); //jquery
provinceObj.add(option); //把创建的option添加到下拉列表中
}
}
function changeCity() {
var provinceName = ElementById("province").value;
//得到第⼀个下拉列表的值
var city = ElementById("city");
//清空第⼆个下拉列表
//⽅法⼀
//city.innerHTML = "";
//⽅法⼆
city.options.length = 1;
for(var p in array) {
js 二维数组
if(p == provinceName) {
/
/遍历每个省份的城市
for(var c in array[p]) {
//创建⼀个option
var option = new Option(array[p][c], array[p][c]);
var city = ElementById("city");
city.add(option);
}
}
}
}
效果如下图：
【构建Table表格的⼆级联动】
可能是table⼆级联动实⽤性不⼤吧，⽹上相关资源实现table⼆级联动可以直接拿来⽤的代码寥寥⽆⼏。下⾯个⼈⽤极其简陋的⽅式实现简单的table⼆级联动。
定义了⼀个表格，为第⼀⾏的每个单元格定义了changeCity()函数，⿏标移⾄单元格时触发此函数。
initProvince()：页⾯载⼊时对表格进⾏初始化。
BeiJing ShanDong QingDao
下⾯是js代码：
array的定义⽤法和上⾯⼀样。初始化函数对table第⼆⾏进⾏统⼀初始化，显⽰为“- - -”。
changeCity()函数中获取table第⼆⾏的单元格，为其⼀⼀赋值。
同时更改第⼀⾏“省”对应单元格的背景⾊，达到聚焦效果。
下⾯这两个⽅法不查⼿册我还真⽤不出来。
array['BeiJing'] = ["朝阳区","昌平区","海淀区"];
array['ShanDong'] = ["青岛","烟台","泰安"];
array['HeNan'] = ["郑州","洛阳","开封"];
function initProvince(){
var secondTab = ElementById("Table").rows[1].cells;
//secondTab[0].innerHTML="dnwd";
for(var i=0;i
secondTab[i].innerHTML = "---";
}
}
function changeCity1(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['BeiJing'][i];
}
}
function changeCity2(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['ShanDong'][i];
}
}
function changeCity3(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['HeNan'][i];
}
最终效果：
完整代码：
/*
*
*/
var array = new Array();
array['BeiJing'] = ["朝阳区","昌平区","海淀区"];
array['ShanDong'] = ["青岛","烟台","泰安"];
array['HeNan'] = ["郑州","洛阳","开封"];
function initProvince(){
var secondTab = ElementById("Table").rows[1].cells;
//secondTab[0].innerHTML="dnwd";
for(var i=0;i
secondTab[i].innerHTML = "---";
}
}
function changeCity1(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['BeiJing'][i];
}
}
function changeCity2(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['ShanDong'][i];
}
}
function changeCity3(){
var secondTab = ElementById("Table").rows[1].cells;
for(var i=0;i
secondTab[i].innerHTML = array['HeNan'][i];
}
}
BeiJing ShanDong QingDao
最后：
由于对CSS、HTML等都在⼊门⽔平(可能还没有⼊门)，实现的过程很简陋，功能也很简单。
若有更好的⽅法思路，恳请赐教。
也许⽤AngularJS会更简单⼀点，毕竟数据绑定超强。但是我不太会哦~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。