读书人

统制表格列显示隐藏小例子

发布时间: 2012-10-25 10:58:57 作者: rapoo

控制表格列显示隐藏小例子
一个控制列显隐的小例子,示例一个,存此备查。

<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 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>

读书人网 >Web前端

热点推荐