点击图片添加table或者是div

原图是
我点击向下的三角形向下的图片后，展开下面的图片中的效果我应该怎么写？
求大神jQuery

解决方案 »

  1.   

    大神可能没有理解我的意思
    我的意思是展开的黄色区域
    我写table,结果是下面单元格全乱了，
    写div层，在firebug下看也不在大的table中
      

  2.   

    这样会不会达到你要的效果<!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>
    <style type="text/css">
        table{ border-collapse:collapse; }
        td{
            border:1px solid #ccc;    
        }
        .detailed td{
         background:#ebb;
        }
        #bntTd{
         width:100px;
        }
        .hide{ display:none }
        #bntTd.show{
         background:#ebb;
         border-bottom-color:#ebb;
        }
    </style>
    </head>
    <body>
     
      <table width="100%" id="tab1" >
      <tr>
        <td id="bntTd"  >&nbsp;  <button onclick="show(this)">bnt</button> </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="detailed hide" >
        <td colspan="3" >
        1<br/>
      2<br/>
        </td>
      </tr>
      <tr>
        <td  id="bntTd">&nbsp;<button onclick="show(this)">bnt</button> </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="detailed hide">
        <td colspan="3"  > 
        1<br/>
      2<br/>
         </td>
        </tr>
    </table> <script>
      function show(el){
      var tb=document.getElementById('tab1');
      var td=el.parentNode;
      var detailed=tb.rows[td.parentNode.rowIndex+1];
      if(td.className=='show'){
      td.className='';
      detailed.className='detailed hide';
      }else{
      td.className='show';
      detailed.className='detailed';  }
      } 
     </script>
    </body>
    </html>