javascript - Indenting every second row of a table without affecting the first rows. htmlcssjsjQuery - Stack Overflow

admin管理员组

文章数量:1405565

I have a table full of data. Every second row is a child row of every first row. So each child row is hidden until I click the parent row. The child rows then fadeIn below the parents with jQuery.

How would I indent the child rows beneath the parent rows so they are clearly child nodes to the parents?

Ive tried adding small elements to the child rows but that just doesnt look right. It ends up crushing the first rows when I expand out the second rows.

I hope this doesnt sound like jibberish...

//HTML & CSS
<table>
    <tr>
        <th id="clickDiv3"></th>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Peter</td>
       <td class="showThird">Griffin</td>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Lois</td>
       <td class="showThird">Griffin</td>
    </tr>
</table>


  //JS
  $("#clickDiv3").click(function(){
      $(".showThird").slideDown(".500").fadeIn(".200");
  });

Any help or advice would be very appreciated!

I have a table full of data. Every second row is a child row of every first row. So each child row is hidden until I click the parent row. The child rows then fadeIn below the parents with jQuery.

How would I indent the child rows beneath the parent rows so they are clearly child nodes to the parents?

Ive tried adding small elements to the child rows but that just doesnt look right. It ends up crushing the first rows when I expand out the second rows.

I hope this doesnt sound like jibberish...

//HTML & CSS
<table>
    <tr>
        <th id="clickDiv3"></th>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Peter</td>
       <td class="showThird">Griffin</td>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Lois</td>
       <td class="showThird">Griffin</td>
    </tr>
</table>


  //JS
  $("#clickDiv3").click(function(){
      $(".showThird").slideDown(".500").fadeIn(".200");
  });

Any help or advice would be very appreciated!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 24, 2015 at 7:37 Daft asked Aug 22, 2013 at 14:37 DaftDaft 11k1616 gold badges6565 silver badges105105 bronze badges 7

• can you make a fiddle – user2408578 Commented Aug 22, 2013 at 14:38
• 2 Please post your code. – j08691 Commented Aug 22, 2013 at 14:39
• Can you create a jsfiddle example? – Dom Commented Aug 22, 2013 at 14:57
• How do you know there is a relationship between these rows? – cimmanon Commented Aug 22, 2013 at 15:07
• 3 It does matter. If there is a relationship between the rows, it needs to be expressed in the markup, not just with visual appearances. If you want real help, maybe you should post data that's actually representative of what you're doing. As it stands, tables look like the wrong markup because you're looking to express a parent/child relationship (which tables aren't really for). – cimmanon Commented Aug 22, 2013 at 15:18

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

Actually you can't exactly do that with tables but you can try this:

table tr:nth(3) td {
    padding-left : 10px;
}

But if you don't have so many columns, you can simply use ul instead of table for such usage. Take a look at http://cssdeck./labs/pure-css-tree-menu-framework

Not sure if this works cross-browser (only tested in Chrome). All cells on even rows will be indented (and overflow the table width):

tr:nth-child(2n) td {
    position: relative;
    left: 20px;
}

http://jsfiddle/3KJdX/

But you should listen to the advice the other users are giving you: maybe a table is not the right structure for your data.

本文标签：