將單行展開成多行

我有兩行的表，當我單擊一行中的圖標時，單獨的行需要展開成多行，然後摺疊，而且如果單擊行中的箭頭按鈕，那麼沒有箭頭按鈕多行需要顯示出來，如果再次點擊它需要去了將單行展開成多行

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Simple Table</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("tr.oda").hide(); 
      $("tr.oda1").show(); 
      /* now if click any one of the image button it expands all the values*/ 

      $("tr.oda1").click(function(){ 
       $(this).siblings(".oda").toggle(); 
       $(this).find(".arrow").toggleClass("up"); 
      }); 
     }); 
    </script> 

<style type="text/css"> 
// here you can add any image you want and just check 
    div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px;  height:16px; display:block;} 
    html, body, div, span, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    abbr, address, cite, code, 
    del, dfn, em, img, ins, kbd, q, samp, 
    small, strong, sub, sup, var, 
    b, i, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td { 
     margin:0; 
     padding:0; 
     border:0; 
     outline:0; 
     font-size:100%; 
     vertical-align:baseline; 
     background:transparent; 
    } 

    body { 
     margin:0; 
     padding:0; 
     font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif; 
     color: #555; 
     background:#f5f5f5 url(bg.jpg); 
    } 

    a {color:#666;} 

    #content {width:65%; max-width:690px; margin:6% auto 0;} 

    /* 
    Pretty Table Styling 
    CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/ 
    */ 

    table { 
     overflow:hidden; 
     border:1px solid #d3d3d3; 
     background:#fefefe; 
     width:70%; 
     margin:5% auto 0; 
     -moz-border-radius:5px; /* FF1+ */ 
     -webkit-border-radius:5px; /* Saf3-4 */ 
     border-radius:5px; 
     -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); 
    } 

    th, td {padding:18px 28px 18px; text-align:center; } 

    th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;} 

    .directory { background:#c0c0c0; } 

    .subdirectory { background:lightgrey; } 

    .subfiles { background:lightblue; } 

    td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;} 


    td.first, th.first {text-align:left} 

    td.last {border-right:none;} 

    .empty {border: 10px solid transparent} 
    /* 
    Background gradients are completely unnecessary but a neat effect. 
    */ 

    td { 
     background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9); 
     background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); 
    } 



    th { 
     background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed); 
     background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb)); 
    } 

    /* 
    I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements. 
    Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius 

    And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it. 
    */ 

    tr:first-child th.first { 
     -moz-border-radius-topleft:5px; 
     -webkit-border-top-left-radius:5px; /* Saf3-4 */ 
    } 

    tr:first-child th.last { 
     -moz-border-radius-topright:5px; 
     -webkit-border-top-right-radius:5px; /* Saf3-4 */ 
    } 

    tr:last-child td.first { 
     -moz-border-radius-bottomleft:5px; 
     -webkit-border-bottom-left-radius:5px; /* Saf3-4 */ 
    } 

    tr:last-child td.last { 
     -moz-border-radius-bottomright:5px; 
     -webkit-border-bottom-right-radius:5px; /* Saf3-4 */ 
    } 

</style> 

</head> 
<body> 
<pre cellspacing="0"> 
    <tr><th class="directory">Directory Name</th><th id="occurances">No of occurances </th></tr> 

    <tr class ="oda1"><td class ="subdirectory">Look at Orman's </a></td><td>100%</td> <td class ="empty"><div class="arrow"></div></td> 
     </tr> 

    <tr class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
     </tr> 
    <tr class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
     </tr> 

    <tr class = "oda1"><td class ="subdirectory">Drink another cup of coffee</td><td>50%</td> <td><div class="arrow"></div></td> 
     </tr> 
    <tr class = "oda"><td >Take a stretch break</td><td>0%</td>  
     </tr> 
    <tr class = "oda"><td >Post this stuff on the interweb</td><td>100%</td> <td><div class="arrow"></div></td> 
     </tr> 
    </pre>/* this is used instead of table tag*/ 
</div> 
</body> 
</html>

來源

2014-02-05 Sree

可以爲您提供一個小提琴。 – rockStar

請參見[Fiddle]（http://jsfiddle.net/satpalsingh/75yDy/）呈現的HTML中沒有tr – Satpal

錶行必須始終是表的一部分，如果你想這些行是一些家長的孩子排 - 他們必須屬於他們自己的桌子。考慮以下設置：

HTML

<table> 
    <tr> 
     <td class="expand">[+]</td> 
     <td>This is parent 
      <table class = "child"> 
       <tr><td>This is child</td></tr> 
       <tr><td>This is child</td></tr> 
       <tr><td>This is child</td></tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>This is parent 
     </td> 
    </tr> 
</table>

在這種情況下我們有擴張跡象上[+]點擊，我們要顯示子表的行父表。讓我們把它最初不可見的（以及申請幾個演示consmetics）

CSS

.child { 
    display: none; 
    padding-left:50px; 
    color: blue; 
} 

.expand { 
    cursor:pointer; 
    vertical-align:top 
}

現在我們需要的是一些JavaScript來把它粘在一起（你的標籤註明的jQuery所以我用它）：

的JavaScript：

$('.expand').click(function() { 
    var $td = $(this); 

    if ($td.text() == '[+]') { 
     $td.text('[-]'); 
     $td.next().children('table').show() 
    } else { 
     $td.text('[+]'); 
     $td.next().children('table').hide() 
    } 
})

該代碼處理單擊「展開」圖標，隱藏或顯示相應的子行。

演示：http://jsfiddle.net/6u8cs/

來源

2014-02-05 20:49:41

將單行展開成多行

回答

相關問題