javascript 实现显示隐藏功能,要通用

Question

<table id="table1">
    <tr>
       <td><a href="#">主题一</a></td>
    </tr>
    <tr id="trSub1" style="display:none">
       <td>主题一详细内容</td>
    </tr>
    <tr>
       <td><a href="#">主题二</a></td>
    </tr>
    <tr id="trSub2" style="display:none">
       <td>主题二详细内容</td>
    </tr>
    <tr>
       <td><a href="#">主题三</a></td>
    </tr>
    <tr id="trSub3" style="display:none">
       <td>主题三详细内容</td>
    </tr>
</table>如上面一段html,初始状态下只显示"主题一","主题二","主题三" 这三行, 要求:
1.点击"主题一"时,显示id="trSub1"这个tr. 再次点击则隐藏.
2.点击哪个主题,就显示哪个主题的详细内容,其它详细内容隐藏.
3.主题的数量是不定的,可能三个,也可能三十个.所以不能写死.用javascript如何实现? 谢谢

Answer 1

<script>
   var box = document.getElementById('table1').getElementsByTagName('a');
   for(var i=1;i<box.length;i++){
       box[i].onclick = function(){
           document.getElementById('trSub'+i).style.display =  document.getElementById('trSub'+i).style.display == "block" ? "none" :"block" ;
       }
   }</script>

Answer 2

<table id="table1">
  <tr>
  <td><a href="javascript:void(0)" onclick="showList(3,'trSub',1)">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none">
  <td>主题一详细内容</td>
  </tr>
  <tr>
  <td><a href="javascript:void(0)" onclick="showList(3,'trSub',2)">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
  <td>主题二详细内容</td>
  </tr>
  <tr>
  <td><a href="javascript:void(0)" onclick="showList(3,'trSub',3)">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>
<script type="text/javascript">
/*总数,id相同部分,当前第几个*/
function showList(count, head, current){
var ele;
for(i = 1 ; i <= count; i++){
ele = document.getElementById(head+i);
if(i == current){
ele.style.display = 'block';
}else{
ele.style.display = 'none';
}
}
}
</script>

Answer 3

<table id="table1">
  <tr>
  <td><a href="#">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none">
  <td>主题一详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
  <td>主题二详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>
<script>
var tbl=document.getElementById("table1");
var a=tbl.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
        var obj=this.parentNode.parentNode.nextSibling;
        obj.style.display=(obj.style.display=="block")?"none":"block"
    }
}
</script>

Answer 4

改：<script>
var curr;
var tbl=document.getElementById("table1");
var a=tbl.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
        var obj=this.parentNode.parentNode.nextSibling;
        obj.style.display=(obj.style.display=="block")?"none":"block";
        if(curr)curr.style.display="none";
        curr=obj;
    }
}
</script>

Answer 5

用jQuery也能实现：
<script type="text/javascript">
$(document).ready( function() {
var hide = $('tr:hidden');
var as = $('a');
as.click( function() {
var a = $(this);
hide.hide();
a.parent().parent().next().toggle();
});
});
</script>

Answer 6

jquery:$(".test").click(function(){
     $(this).parent().hide();
 $(this).parent().next().show();
});
for(var i=1;i<4;i++){
     var id = "#trSub" +i;
 $(id).click(function(){
     $(this).hide();
 $(this).prev().show();
 });
}html:<table id="table1">
  <tr>
    <td class="test"><a href="#">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none">
    <td>主题一详细内容</td>
  </tr>
  <tr>
   <td class="test"><a href="#">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
   <td>主题二详细内容</td>
  </tr>
  <tr>
   <td class="test"><a href="#">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>

Answer 7

回7楼， 能否用javascript来实现？

Answer 8

二楼的方法虽然可以实现第二点，但是万一有一百个主题的话，那就恐怖了。showList(3,'trSub',3)要改一百次。
还是先谢谢各位。能改进一下吗

Answer 9

<table id="table1">
  <tr>
  <td><a href="javascript:void(0)" onclick="showList('trSub1')">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none">
  <td>主题一详细内容</td>
  </tr>
  <tr>
  <td><a href="javascript:void(0)" onclick="showList('trSub2')">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
  <td>主题二详细内容</td>
  </tr>
  <tr>
  <td><a href="javascript:void(0)" onclick="showList('trSub3')">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>
<script type="text/javascript">
/*总数,id相同部分,当前第几个*/
function showList(id) {
var pre = "";
for (i = 1; i <= count; i++) {//count是多少<td>
var ele = document.getElementById("trSub" + i);
ele.style.display = "none";
}
if (pre == id) {
document.getElementById(id).style.display = "";
pre = id;
}
}
</script>

Answer 10

var tbl=document.getElementById("table1");
var tr=tbl.getElementByTagName("tr");
var a=tbl.getElementByTagName("a");
for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
        var obj=tr[i+1];
        obj.style.display=(obj.style.display=="block")?"none":"block";
    }
}

Answer 11

搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}

Answer 12

三楼朋友shan1119挺好的，可惜就是同一主题只能点击一次来回，继续点击就没反应了，能否改进一下，谢谢 

Answer 13

可以结贴了：
<!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>
    <title>无标题页</title>
    <style type="text/css">
        
    </style>
    
<script type="text/javascript">
    window.onload = function()
    {
        var tbl = document.getElementById("table1");
        var r = 0;
        var obj = tbl.getElementsByTagName("a");
        for (var i = 0; i < obj.length; i++)
        {
            obj[i].onclick = function()
            {
                for (var j = 1; j < document.getElementById("table1").rows.length; j =j+ 2)
                {
                    document.getElementById("table1").rows[j].style.display = "none";
                }
                
                var o = this.parentNode.parentNode.nextSibling;
                if (!window.event)
                {
                    do { o = o.nextSibling; } while (o.nodeType != 1)
                }                o.style.display = (o.style.display == "block") ? "none" : "block"            }
        }
    }
    
</script>
</head>
<body ><table id="table1">
  <tr>
    <td><a href="#">主题一</a></td>
  </tr>
  <tr style="display:none">
    <td>主题一详细内容</td>
  </tr>
  <tr>
    <td><a href="#">主题二</a></td>
  </tr>
  <tr style="display:none">
    <td>主题二详细内容</td>
  </tr>
  <tr>
    <td><a href="#">主题三</a></td>
  </tr>
  <tr style="display:none">
    <td>主题三详细内容</td>
  </tr>
</table>
</body>
</html>

Answer 14

一气之下自己写了个,兼容所有浏览器:
<!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=utf-8" />
<title>无标题文档</title>
</head><body>
<table id="table1">
  <tr>
  <td><a href="#">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none"><td>主题一详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
  <td>主题二详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>
</body>
<script language="javascript">
var a=document.getElementById("table1").getElementsByTagName("a");
var current;
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
var nextNode=this.parentNode.parentNode;
getNextSibling(nextNode).style.display=(getNextSibling(nextNode).style.display=="block")?"none":"block";
if(current)
{
getNextSibling(current).style.display="none";
}
current=nextNode.nextSibling;
return false;
}
}
function getNextSibling(node){
var nextNode;
if(node.nextSibling.nodeType!=1)
nextNode=node.nextSibling.nextSibling;
else{
nextNode=node.nextSibling;
}
return nextNode
}
</script>
</html>
因为有些浏览器把换行也当成一个节点(#text),所以用getNextSibling这个函数来去除#text

Answer 15

又搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}else{//回到默认值
 pre="";
}

Answer 16

又搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}else{//回到默认值
 pre="";
}

Answer 17

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var showInfo = function(id) {
var _table = document.getElementById(id);
var _tr = _table.rows;
var _len = _tr.length;
var _self = this;
this.content = [];
for(var i = 0; i< _len; i++) {
if((i % 2) == 0) {
(function(){
var _i = i;
_tr[i].getElementsByTagName('a')[0].onclick = function(){_self.show(_i / 2)};
})();
} else {
this.content.push(_tr[i]);
}
}
}
showInfo.prototype = {
show: function(n) {
var _len = this.content.length;
for(var i = 0; i < _len; i++){
if(i == n) {
this.content[i].style.display = (this.content[i].style.display == 'block') ? 'none' : 'block';
} else {
this.content[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td><a href="#">主题一</a></td>
</tr>
<tr id="trSub1" style="display:none">
<td>主题一详细内容</td>
</tr>
<tr>
<td><a href="#">主题二</a></td>
</tr>
<tr id="trSub2" style="display:none">
<td>主题二详细内容</td>
</tr>
<tr>
<td><a href="#">主题三</a></td>
</tr>
<tr id="trSub3" style="display:none">
<td>主题三详细内容</td>
</tr>
</table>
<script type="text/javascript">
new showInfo('table1');
</script>
</body>
</html>

Answer 18

下班走的急，还有点小问题回家解决了，送上完美版！
<!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>
    <title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        
    </style>
    
<script type="text/javascript">
    window.onload = function()
    {
        var tbl = document.getElementById("table1");
        var r = 0;
        var obj = tbl.getElementsByTagName("a");
        for (var i = 0; i < obj.length; i++)
        {
            obj[i].onclick = function()
            {   
                var o = this.parentNode.parentNode.nextSibling;
                if (!window.event)
                {
                    do { o = o.nextSibling; } while (o.nodeType != 1)
                }
                o.style.display = (o.style.display == "block") ? "none" : "block"
for (var j = 1; j < document.getElementById("table1").rows.length; j =j+ 2)
                {
if (document.getElementById("table1").rows[j] !=o)
{
document.getElementById("table1").rows[j].style.display = "none";
}
                }
            }
        }
    }
    
</script>
</head>
<body ><table id="table1">
  <tr>
    <td><a href="#">主题一</a></td>
  </tr>
  <tr style="display:none">
    <td>主题一详细内容</td>
  </tr>
  <tr>
    <td><a href="#">主题二</a></td>
  </tr>
  <tr style="display:none">
    <td>主题二详细内容</td>
  </tr>
  <tr>
    <td><a href="#">主题三</a></td>
  </tr>
  <tr style="display:none">
    <td>主题三详细内容</td>
  </tr>
</table>
</body>
</html>