table 原来还可以这样用啊

liyiye

浏览: 425089 次
性别:
来自: 广州

最近访客更多访客>>

fangwei

yourtion

影子yingzi

janphy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js_and_css

因为页面的需要，要对table的每一列进行显示和隐藏的操作，感觉没有什么好的方法，没有想到上网找了一下，居然发现了一个好的标签（狠汗颜）， <COLGROUP>

以下是一个小例子：

/********************************/

/********************************/

col 可以对table的没一列进行一些样式的设置

查看图片附件

分享到：

页面生成打开excel（运用poi） | flex控件的学习网站（收藏）

2008-10-24 10:03
浏览 2961
评论(97)
论坛回复 / 浏览 (92 / 30546)
查看更多

57 楼香克斯 2008-10-29

zbm2001的观点很支持。
现在浮躁的人太多了，能这么静下心来研究基础和规范的人少啊

56 楼 hesy_007 2008-10-29

现在table的机会不多了，基本上都是div + css 了。

55 楼 ftplove 2008-10-29

学习方法跟学习态度的问题

态度我认为应该是在某一领域做专，做精

方法我认为应该跟本身所处在的阶段有关
初级阶段：能把某一领域的知识掌握30-40%差不多，这样就可以在这个领域能干活了
中级阶段：能把某一领域的某一个方面的知识掌握70-80％，成为这个方面的专家
高级阶段：能把某一领域的知识掌握70-80％，成为这个领域的专家

54 楼 DeadFire 2008-10-29

不得不服javaeye论坛，这样一贴居然都有六页回复了。

我记得javaeye论坛每天删贴数量大于发帖数量的（所以注册这么长时间这才第二帖），难不成这么几年改变了。

53 楼 weizh 2008-10-28

恩，不错。不过目前我的项目中似乎整个网站都没有出现table标签。

52 楼 letle 2008-10-28

学无止境！

51 楼 maming2000 2008-10-28

ide里面都有这个标记的提示吧，留心点的话就发现了。
现在浏览器真多，什么时候弄个组织同时管一管浏览器和标准才像话。

50 楼 pipilu 2008-10-28

liyiye 写道

pipilu 写道

汗，才发现好多人说firefox不支持。
我回头看了一下我以前做过的页面，发现应该是ie6和ie7不支持啊。
试了一下。
发现firefox支持对col定义的样式，但对通过col操纵column不支持（比如根据col的id获得col对象后，操纵它的显示和隐藏）
我那个所说的“ie不支持 firefox支持”的情况很凑巧，是这样的：
Java代码 <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title></title>
      <script type="text/javascript">
      <![CDATA[//><!]]>
      </script>
      <style type="text/css" media="all">
      <![CDATA[/*>
      </style>
  </head>
  <body>
  <table cellspacing="0" border="1">
      <colgroup>
          <col id="col1" />
          <col id="col2" />
      </colgroup>
      <tbody>
          <tr><td id="111">asdf</td>
          <td>asdf</td>
          </tr>
      </tbody>
  </table>
  <button onclick="hiddenCol()">隐藏列</button>
  </body>
  </html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
<style type="text/css" media="all">
<![CDATA[/*>
</style>
</head>
<body>
<table cellspacing="0" border="1">
<colgroup>
<col id="col1" />
<col id="col2" />
</colgroup>
<tbody>
<tr><td id="111">asdf</td>
<td>asdf</td>
</tr>
</tbody>
</table>
<button onclick="hiddenCol()">隐藏列</button>
</body>
</html>
在firefox下，列的红色右边界（就是col那个样式）可以看到。在ie下就不行。
只是简单的试了一下。

我也试了一下，好像两个浏览器对它的解释不同，不是不支持javascript，在firefox下，当你对col的样式设置为隐藏的时候，它的其它样式是显示不了，相当与隐藏了（你直接在col里面设置样式就可以看到）。

那firefox下的表现应该是正确的。ie6下的表现就比较费解了，原因如下：
使用这样的javascript语句来移除第一个col：

　　　　var elem =document.getElementById("col1");
　　　　elem.parentNode.removeChild(elem);

这种情况下ie6和firefox下的表现是一样的。但remove和display:none的表现应该是一样的啊？！，而在firefox下remove这个col，和设这个col的display为none的表现是一样的。在ie6下就有区别。
所以我认为是ie6不规范。

49 楼 ThinkInJava 2008-10-28

给一个id,document.getElementById('id').style.display="none";这样也可以啊！看你想实现什么样的功能了，也可以：
var headTable = document.getElementById("headerTable");
    dynTr = headTable.insertRow(-1);
var tdLableElement1 = dynTr.insertCell(0);
    tdLableElement1.className = "label1";
var lableElement1 = document.createElement("LABEL");
var txtNode1 = document.createTextNode("Mothly");
    lableElement1.appendChild(txtNode1);
    tdLableElement1.appendChild(lableElement1);

48 楼 liucl_tiger 2008-10-28

学习你们经验！

47 楼 ytcheng 2008-10-27

没错，术业有专攻，做为一个后端程序员把这些让给前端工程师研究吧。

46 楼 inshua 2008-10-27

vs2008 效果圖

這些標記看文檔很累，工具對人幫助比較大

45 楼 ywg2008 2008-10-27

楼主说的这个好像在FIREFOX里不能用呀！

不知道这些标签符合W3标准码？

44 楼 shanlingyunjavafuns 2008-10-27

路过！看看！

43 楼 liyiye 2008-10-27

reeze 写道

liyiye 写道kaipingk@gmail.com 写道
支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。

做一个网站是需要很多方面的知识，难道你为了做一个网站把所有的知识点都学透，学深。现实是没有给你太多的时间，让你去研究的，所以我不同意你的看法。当然如果你只是负责其中的一个小的方面，例如只是用html写一些页面，那你当然可以把这个学的很深，很透彻。但是那样又有什么意义啊？

举个很简单的例子
比如上面列举的<theade> <th><tfoot> 标签，如果你要实现一个表头特殊的效果。如果你不知道有这几个标签，你想到应该是这样子的代码吧
<table>
<tr class="table_header">
<td>表头</td>
</tr>
<tr>
<td>neirong</td>
</tr>
</table>
这样虽然能达到你要的效果。但是在很多方面都有不好的地方。可用性啊，语义性啊。
并且css写起来也会麻烦一下。

所以说基础知识还是很重要的。在时间不允许的时候做一些折中的做法我觉得是可以的，但是如果你发现重复了N遍之后你还是再折中的话，我觉得有必要反思一下了。

基础知识很重要，这个是不可否认的。我一直强调，知识点要先博而后精，像你举的例子一样，你如果不知道有更好的东西，而一味用一些很复杂的东西，还一直想去专研它，那样只是浪费时间而已啊。----个人的一下看法

42 楼 liyiye 2008-10-27

pipilu 写道

41 楼 reeze 2008-10-27

liyiye 写道

kaipingk@gmail.com 写道

支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。

做一个网站是需要很多方面的知识，难道你为了做一个网站把所有的知识点都学透，学深。现实是没有给你太多的时间，让你去研究的，所以我不同意你的看法。当然如果你只是负责其中的一个小的方面，例如只是用html写一些页面，那你当然可以把这个学的很深，很透彻。但是那样又有什么意义啊？

举个很简单的例子
比如上面列举的<theade> <th><tfoot> 标签，如果你要实现一个表头特殊的效果。如果你不知道有这几个标签，你想到应该是这样子的代码吧
<table>
<tr class="table_header">
<td>表头</td>
</tr>
<tr>
<td>neirong</td>
</tr>
</table>
这样虽然能达到你要的效果。但是在很多方面都有不好的地方。可用性啊，语义性啊。
并且css写起来也会麻烦一下。

所以说基础知识还是很重要的。在时间不允许的时候做一些折中的做法我觉得是可以的，但是如果你发现重复了N遍之后你还是再折中的话，我觉得有必要反思一下了。

40 楼 pipilu 2008-10-27

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title></title>	
	<script type="text/javascript">
	<!--//--><![CDATA[//><!-- 
	var status = 1;
	function hiddenCol() {
		if (status == 1) {
			document.getElementById("col1").style.display  = "none";
			status = 0;
		}
		else {
			document.getElementById("col1").style.display  = "block";
			status = 1;
		}
	}
	//--><!]]> 
	</script>
	<style type="text/css" media="all">
	<!--/*--><![CDATA[/*><!--*/
	table {
		background: #FFFFFF;
		border-collapse: collapse;
	}
	col {
		border-right: 5px #FF0000 solid;
	}
	
	#col1 {
		background: #FFF000;
	}
	/*]]>*/--> 
	</style>
</head>
<body>
<table cellspacing="0" border="1">
	<colgroup>
		<col id="col1" />
		<col id="col2" />
	</colgroup>
	<tbody>
		<tr><td id="111">asdf</td>
		<td>asdf</td>
		</tr>
	</tbody>
</table>
<button onclick="hiddenCol()">隐藏列</button>
</body>
</html>

在firefox下，列的红色右边界（就是col那个样式）可以看到。在ie下就不行。
只是简单的试了一下。

39 楼 liyiye 2008-10-27

kaipingk@gmail.com 写道

支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。

38 楼 xdsnet 2008-10-27

zbm2001 写道

xly_971223 写道

刚在forefox3中测试了一下，不管用

这显然是楼主浅尝辄止的必然结果……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格列控制</title>
</head>
<body>
<table width="90%" border="1">
<colgroup style="background:red;">
<col style="visibility:collapse; +display:none;" />
<col style="background:green;" />
<col />
</colgroup>
<tbody>
    <tr>
      <td>1111</td>
      <td>222</td>
      <td>3333</td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
</tbody>
</table>
</body>
</html>

看来还是要尽量找那些常用的标签，上面的内容经测试，只在IE和firefox上通过，而opera9，谷歌浏览器，safari3上面都不行，都是显示全部。

« 上一页 1 2 3 4 5 下一页 »

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论