JQ控制显示隐藏

<table id="table_1"></table>
<table id="table_2"></table>
<table id="table_3" style="display:none"></table>
<table id="table_4" style="display:none"></table>
<table id="table_5" style="display:none"></table>
<table id="table_6" style="display:none"></table>
<table id="table_7" style="display:none"></table>
<table id="table_8" style="display:none"></table>
<table id="table_9" style="display:none"></table>
<table id="table_10" style="display:none"></table>
<a>添加<a><a>删除</a>点击添加  table_3显示   再点table_4显示   点击删除   table_4隐藏   再点  table_3隐藏   
当table_10显示出来  添加隐藏     当table_2隐藏   删除隐藏    这个要怎么写啊    求帮助

解决方案 »

  1.   

    你既然都有Id还有什么难的..写a的click事件。。控制它们的style是隐藏或者显示。。
      

  2.   

    1、给你的 添加 和 删除 连接加ID  linkAdd  linkDel
    2、给你隐藏的table 加个 class  hidenTablevar flag = 0
    $(document).ready(function(){
      var ary = $(".hidenTable");
      $("#linkAdd").click(function(){
        ary[i].css("display","");
        if(i < ary.length)
          i = i + 1;
        return false;
      });
      $("#linkDel").click(function(){
        ary[i].css("display","none");
        if(i > 0)
          i = i - 1;
        return false;
      })
    })
      

  3.   

    调试一下啊...给你全码吧
    <!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>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    var i = 0
    $(document).ready(function(){
      var ary = $(".hidenTable");
      $("#linkAdd").click(function(){
        $(ary[i]).css("display","");
        if(i < ary.length)
          i = i + 1;
        return false;
      });
      $("#linkDel").click(function(){
        if(i > 0)
          i = i - 1;
        $(ary[i]).css("display","none");
        return false;
      })
    })
    </script>
    </head>
    <table id="table_1">
    <tr><td>1</td></tr>
    </table>
    <table id="table_2">
    <tr><td>2</td></tr>
    </table>
    <table class="hidenTable" id="table_3" style="display:none">
    <tr><td>3</td></tr>
    </table>
    <table class="hidenTable" id="table_4" style="display:none">
    <tr><td>4</td></tr>
    </table>
    <table class="hidenTable" id="table_5" style="display:none">
    <tr><td>5</td></tr>
    </table>
    <table class="hidenTable" id="table_6" style="display:none">
    <tr><td>6</td></tr>
    </table>
    <table class="hidenTable" id="table_7" style="display:none">
    <tr><td>7</td></tr>
    </table>
    <table class="hidenTable" id="table_8" style="display:none">
    <tr><td>8</td></tr>
    </table>
    <table class="hidenTable" id="table_9" style="display:none">
    <tr><td>9</td></tr>
    </table>
    <table class="hidenTable" id="table_10" style="display:none">
    <tr><td>10</td></tr>
    </table>
    <a href="javascript:void(0)" id="linkAdd" >添加</a><a href="javascript:void(0)" id="linkDel">删除</a>
    </html>
      

  4.   

    刚才写顺手了，在函数里用flag 的时候直接写成 i 了。
    $(ary[i]) 指的是把 ary[i] 转换成JQuery对象，当然，你可以不这么做。