关于多个表格的显示和隐藏问题。一次只显示一个表格，其他表格均隐藏。


//这样即可 ，不管你有多少表格 ，也不管你表格怎么来的
$(document).ready(function(){
$("img").click(function(){
var _id = $(this)[0].id;
$("table").each(function(i){
$(this).hide();
$("#table_"+ _id.split("_")[1]).show();
});
});
});

解决方案 »

  1.   

    tantaiyizu 
    谢谢这么快就回复了
    我是初学，还表太理解，能解释的清楚些吗？
    这个我该怎么调用呢在onclick 中直接写上 funtion(id)???
      

  2.   


    不管怎么去写 ，思路不变写个方法 ，点图片时候把当前图片id传进去 ，先把所有table隐藏 ，然后根据图片id显示相应的表格具体方法： object.style.display = "";//显示
    object.style.display = "none";//隐藏
      

  3.   

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js">
    //把这些代码加入到你的页面中就可以完成你想要的效果
    $(document).ready(function(){
        $("img").click(function(){
            var _id = $(this)[0].id;
            $("table").each(function(i){
                $(this).hide();
                $("#table_"+ _id.split("_")[1]).show();
            });
        });
    });
    </script>
      

  4.   

    加上了，可是不能显示阿。图片的onclick上什么都不加就能实现吗？对于这个prototyped的框架，我是真的不懂，一点也不明白..crying
      

  5.   

    tantaiyizu用的那个是jquery的框架
      

  6.   

    刚查了查。这个$(document).ready(function() 是jQuery 
    我还是第一次了解这个。。要学的东西咋就那么多呢
      

  7.   

    <!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>Test</title>    
    </head>
    <body>
    <script>
    var tbcount=3;//一共有多少个表格
    document.onclick=Handler;
    function Handler(e)
    {
      e=e||event;
      var tag=e.srcElement||e.target;
      var Index=0;
      if(tag.tagName=="IMG")
      {
        var reg=/(\d+)/gi
        var match=tag.id.match(reg);
        if(match==null) return;
        Index=parseInt(match[0]);
        Op(Index);
      }
    }
    function Op(Index)
    {
      for(var i=1;i<=tbcount;i++)//注意循环变量i的初始值，根据你的最小的编号来取，这里是1开始，所以为1
      {
         var tb=document.getElementById('tb_'+i);
         if(i==Index)
         {
           if(tb.style.display=="none")
             tb.style.display="";
           else
             tb.style.display="none";
         }
         else
         {
           tb.style.display="none";
         }
      }
    }
    </script>
    <img src='1.jpg' id='img_1'/><img src='2.jpg' id='img_2'/><img src='3.jpg' id='img_3'/>
    <br/>
    <table id='tb_1' style='display:none'>
    <tr><td>table1</td></tr>
    </table>
    <table id='tb_2' style='display:none'>
    <tr><td>table2</td></tr>
    </table>
    <table id='tb_3' style='display:none'>
    <tr><td>table3</td></tr>
    </table>
    </body>
    </html>
      

  8.   

    showbo 
    太感谢了！！！！！
    困惑了我一整天的问题终于搞定了！！
    高兴ing ^^
      

  9.   

    是实现了 要是 tbcount = 3 换成 tbcount = document.getElementsByTagName("table").length 会更好些吧