We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Hiding table columns and make href clickable rows

    • 29076
    • 615 Posts
    Sylvaticus Reply #1, 17 years, 1 month ago
    Hmm, for some people reading jquery and code in generell is like reading a good novell. For me it’s more like reading egyptian hieroglyphs (except HTML and CSS). I have used 4 days now to try to make this, but so far I haven’t succeded. Therefor I dare to ask you people for some help:

    I have a table (yes, in these case it migh be usefull) smiley ;

    ------------------------------------------------------------------------
    | TD class="group" | TD class="column1" | TD class="column2" | TD class="column3" |
    ------------------------------------------------------------------------
    | Group data row 1 | Row1 data | Row1 data | Row1 data |
    ------------------------------------------------------------------------
    | Group data row 1 | Row2 data | Row2 data | Row2 data |
    ------------------------------------------------------------------------
    | Group data row 1 | Row3 data | Row3 data | Row3 data |
    ------------------------------------------------------------------------

    My questions:

    1. I have three links:
    Click1 = click to show column 1 and hide column2 and column3
    Click2 = click to show column 2 and hide column1 and column3
    Click3 = click to show column 3 and hide column1 and column2

    How can I, with jquery (or only CSS), make this links to do, eh, just what I described them to do? Something like: Show td.column1, hide td.column2, hide td.column3.
    The point is, the first column, the Group Column, should always be vissible, but only one of the other columns should be visible at the same time. (I managed to do some of it with http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html, but I just couldn’t get rid of some weird animation on changing columns, and it became rather complicated).

    2. Every row should change color on hover and at the same time be clickable with a href-link (like this: http://dyve.net/jquery/?listify#pp).

    Thanks! laugh
      I think, thererfor I am! But what I am, and why...?
      • 22840
      • 1,572 Posts
      Paulp Reply #2, 17 years, 1 month ago
      Ok might be a stupid answer but can this be done with divs having a table in each ( if the tables are needed )

      If so then you could use javascript to open each div on click and close the rest ( I think its called Accordion ( http://docs.jquery.com/UI/Accordion )

      Then all you would have to do is add the link for each, or is this not possible by the method your using and should we re-think the method to work with the Accordion

      Cheers

      Paul
        • 29076
        • 615 Posts
        Sylvaticus Reply #3, 17 years, 1 month ago
        Thanks for your answer paulp. smiley

        I already have it working with DIVs and TABLE TR TD in every DIV (without the row-links). And I have 6 of them. But I think it’s to much HTML in it. I beleave it’s possible to do in a simpler way. Just an ordinary table, and hiding/showing the columns. I just can’t figure out how yet.
          I think, thererfor I am! But what I am, and why...?
          • 22840
          • 1,572 Posts
          Paulp Reply #4, 17 years, 1 month ago
          Ok how about something like this then http://www.packtpub.com/article/jquery-table-manipulation-part2

          About half way down "Collapsing and Expanding" I think os what your looking for, but no idea how to add it.

          Paul
            • 29076
            • 615 Posts
            Sylvaticus Reply #5, 17 years, 1 month ago
            The code is below.

            (OK, thanks. smiley I managed to do it, it was simpler then I expected (as usual), when I first got in the right direction.)

            So, next thing, how can I make the columns Weekday and Monday to be the only visible columns when the page shows (or when refreshing the page).

            Note 1: I know I can ask these questions in a jquery forum, but there’s so many of them, and so many clever people her, so .....
            Note 2: The href links will later go to the full table with all the weekdays showing, for non javascript users.
             
<html> 
<head> 
    <title>Hide Table Columns</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function() {
                $('td:nth-child(2)').show();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            $('a#mon').click(function() {
                $('td:nth-child(2)').fadeIn();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            });
            $('a#tue').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').fadeIn();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            });
            $('a#wed').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').fadeIn();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            });
            $('a#thu').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').fadeIn();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            });
            $('a#fri').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').fadeIn();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').hide();
            });
            $('a#sat').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').fadeIn();
                $('td:nth-child(8)').hide();
            });
            $('a#sun').click(function() {
                $('td:nth-child(2)').hide();
                $('td:nth-child(3)').hide();
                $('td:nth-child(4)').hide();
                $('td:nth-child(5)').hide();
                $('td:nth-child(6)').hide();
                $('td:nth-child(7)').hide();
                $('td:nth-child(8)').fadeIn();
            });
        });
    </script> 
</head> 
<body> 
<table border="1"> 
    <tr> 
        <td>Weekday</td> 
        <td>Monday</td> 
        <td>Tuesday</td> 
        <td>Wednesday</td> 
        <td>Thursday</td> 
        <td>Friday</td> 
        <td>Saturday</td> 
        <td>Sunday</td> 
    </tr>
</table>
    <a href="#" id="mon">Monday</a>
    <a href="#" id="tue">Tuesday</a>
    <a href="#" id="wed">Wednesday</a>
    <a href="#" id="thu">Thursday</a>
    <a href="#" id="fri">Friday</a>
    <a href="#" id="sat">Saturday</a>
    <a href="#" id="sun">Sunday</a>
</body> 
</html>
              I think, thererfor I am! But what I am, and why...?