Injecting CSS and JavaScript in HTML code

Question

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>

Also note that when trying to fetch an element from the DOM, the element must be available. That means you either have to move your javascript further down in the DOM, or use document ready, after you've included jQuery of course. — adeneo
– adeneo, Commented Apr 8, 2014 at 13:45

George Sisco · Accepted Answer · 2014-04-08 14:10:54Z

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.

developers-have-no-vacation · Accepted Answer · 2014-04-08 13:44:12Z

1

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>

answered Apr 8, 2014 at 13:44

developers-have-no-vacation

6421 gold badge5 silver badges13 bronze badges

Comments

Gntvls · Accepted Answer · 2014-04-08 13:48:04Z

1

Import jquery library first

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

edited Apr 8, 2014 at 13:48

answered Apr 8, 2014 at 13:44

Gntvls

2304 silver badges16 bronze badges

Collectives™ on Stack Overflow

Injecting CSS and JavaScript in HTML code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related