一个控制列显隐的小例子,示例一个,存此备查。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
Array.prototype.indexOf=function(substr,start){
var ta,rt,d='\0';
if(start!=null){ta=this.slice(start);rt=start;}else{ta=this;rt=0;}
var str=d+ta.join(d)+d,t=str.indexOf(d+substr+d);
if(t==-1)return -1;rt+=str.slice(0,t).replace(/[^\0]/g,'').length;
return rt;
}
function modelChange(obj){
var check_array0 = new Array(1,2,3,4);
var check_array1 = new Array(1,2);
var check_array2 = new Array(3,4);
//alert(check_array0.indexOf('1'));
//alert(check_array0.indexOf('2'));
//alert(check_array0.indexOf('5'));
if (obj.value == "sy") {
//for(var i = 0 ; i < check_array1.length ; i ++ ){
// show(check_array1[i]);
//}
//for(var i = 0 ; i < check_array2.length ; i ++ ){
// hidden(check_array2[i]);
//}
showHidden(check_array1,check_array2);
}
if (obj.value == "jj") {
//for(var i = 0 ; i < check_array1.length ; i ++ ){
// hidden(check_array1[i]);
//}
//for(var i = 0 ; i < check_array2.length ; i ++ ){
// show(check_array2[i]);
//}
showHidden(check_array2,check_array1);
}
if (obj.value == "all") {
for(var i = 0 ; i < check_array0.length ; i ++ ){
show(check_array0[i]);
}
}
}
function showHidden(obj1,obj2){
var tbs = document.getElementsByTagName("table")
for (var j = 0 ; j < tbs.length ; j ++ ) {
for (var m = 0 ; m < tbs[j].rows.length ; m ++ ) {
for(var n = 1; n < tbs[j].rows[m].cells.length ; n ++ ) {
//alert(j+" "+m+" "+n);
if (obj1.indexOf(n) != -1) {
tbs[j].rows[m].cells[n-1].style.display="";
}
if (obj2.indexOf(n) != -1) {
tbs[j].rows[m].cells[n-1].style.display="none";
}
}
}
}
}
function show(obj){
var tbs = document.getElementsByTagName("table")
for (var j = 0 ; j < tbs.length ; j ++ ) {
for (var m = 0 ; m < tbs[j].rows.length ; m ++ ) {
tbs[j].rows[m].cells[obj-1].style.display="";
}
}
}
function hidden(obj){
var tbs = document.getElementsByTagName("table")
for (var j = 0 ; j < tbs.length ; j ++ ) {
for (var m = 0 ; m < tbs[j].rows.length ; m ++ ) {
tbs[j].rows[m].cells[obj-1].style.display="none";
}
}
}
</script>
</head>
<body>
<div>
<ul><li>
<font>报价方式</font>
<select class="text select" id="mode" onchange="modelChange(this);">
<option value="all" selected="selected">全部</option>
<option value="sy" >收益率</option>
<option value="jj" >净价</option>
</select>
</li></ul>
</div>
<table id="tableNode" border=1>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td></tr>
</table>
</body>
</html>