一个控制列显隐的小例子,示例一个,存此备查。
<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>