SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs within tables for javascript show/hide function?

    Is it valid to use divs within tables in XHTML transitional? I've got a chunk of a table that I need a js show/hide toggle on and enclosing those rows in a div with an id would be ideal. I need decent cross-browser support from IE6+, FF, Safari, Opera, etc.

    Something like this?

    HTML Code:
    <div class="wrap">
        <div class="inner">
            <table id="data" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class="last"><p>Dec</p></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class="last"><p>Dec</p></th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class="last">3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class="last">7</td>
                    </tr>
    
                   <div id="showhide">
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class="last">3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class="last">4</td>
                    </tr>
    
                    </div> <!-- end showhide section -->
    
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class="last">4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class="last">4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    
    Last edited by tryin_to_learn; Jul 6, 2009 at 07:20. Reason: Added cross browser line

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that's not valid. A table row group (thead, tfoot or tbody) can only contain rows (tr), nothing else.

    And a row can only contain cells (td or th), so you can't put a div as a child of a row either.

    Why does it have to be a div, though? You can set the ID of a table row or row group just as well. And you can have multiple tbody elements in one table.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - there's some basic HTML stuff I need to know then. I wasn't aware of row groups - nor did I know you could have more than one tbody. Using single rows themselves for the hook is a bit problematic because the js is easier to manage if you can target a single id and we need several rows involved.

    I'll Google row groups and tbody - or if you have any good reference suggestions, I'd appreciate having them.

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll check into these.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •