当前位置: 代码迷 >> Web前端 >> 统制表格列显示隐藏小例子
  详细解决方案

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

热度:152   发布时间:2012-10-25 10:58:57.0
控制表格列显示隐藏小例子
一个控制列显隐的小例子,示例一个,存此备查。

<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>
  相关解决方案