CODEWITHSUNDEEP
javascripthtmlcss
Ionut
Ionut

Reputation: 1749

Injecting CSS and JavaScript in HTML code

I am new to web programming. So I have modified a code that I found online and ended up with this : jsfiddle.net/y4Mdy/673 witch works fine, all the header rows in the table are shown and the others are hidden, and then can be revealed by clicking the headers.

But When I am trying to assemble the html, CSS and JavaScript together (following the instruction found here) it does not seem to work. When I click on the headers nothing happens, the other rows are not revealed. Here is the content of my html file :

<html>
    <head>
        <script type="text/javascript">
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 0

Views: 118

Answers (3)

George Sisco
George Sisco

Reputation: 621

You want to load jQuery first, like other people are saying, and you may also want to put your code inside the 'ready' function, since you're running the code at the top of the page. That way, you can make sure your whole page is loaded before the code runs.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
           $( document ).ready(function() {
            // Handler for .ready() called.
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
          });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

See info here: http://api.jquery.com/ready/

Also, keep in mind that in the above example, you're loading jQuery from the internet. You may want to download it locally and load it from within your local directory, depending on your situation. For your purposes, though, as long as you have an internet connection, you're probably fine to do it by linking from the internet.

Upvotes: 1

Gntvls
Gntvls

Reputation: 230

Import jquery library first

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 1

developers-have-no-vacation
developers-have-no-vacation

Reputation: 642

You are using jQuery in your code, but you forgot to include the jquery files !

Add this in your html : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 1

Related Questions