0

In the head i have these files only:

<script src="Expand.js"></script>
<link href="style.css" rel="stylesheet" />

... Expand.js has only got this inside:

(function ($) {
    $.fn.jExpand = function () {
        var element = this;
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function () {
            $(this).next("tr").toggle();
        });
    }
})(jQuery);

And the css file has only got styles for the table:

#example_table {
  border-collapse: collapse;
  font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
  font-size: 12px;
  margin: 20px;
  text-align: left;
  width: 100%;
}
#example_table th {
  color: #339;
  font-size: 15px;
  font-weight: normal;
  padding: 12px;
}
#example_table td {
  background-color: #e8e8e8;
  border-top: 1px solid #fff;
  padding: 9px 12px;
}
#example_table tr.odd td {
  cursor:pointer;
}
#example_table tr:not(.odd) td {
  background-color: #f4f4ff;
}

.tableContainer{
  width: 90%;
}

#training-box {
background: none no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
display: inline-block;}

.tableup {
    margin-top: -30px;
    margin-left: -20px;
}

The HTML:

<div class="tableContainer ">
            <table id="example_table">
                <tr>
                    <th></th>
                </tr>
                <tr>
                    <td class="fa fa-plus-circle">&nbsp;&nbsp;Title 1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!-- additional custom info is here (for Record 1) -->
                        <hr class="micro-hr" />
                        <span class="fa fa-arrow-circle-o-right">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        </span>
                        <hr class="micro-hr" />
                    </td>
                </tr>
                <tr>
                    <td class="fa fa-plus-circle">&nbsp;&nbsp;Title 2</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!-- additional custom info is here (for Record 2) -->
                        <div class="training-box">
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br>

                    </td>
                </tr>
                <tr>
                    <td class="fa fa-plus-circle">&nbsp;&nbsp;Title 3</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!-- additional custom info is here (for Record 3) -->
                        <div class="training-box">
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet</span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet</span><br>

                    </td>
                </tr>
            </table>
            <script>
            $(function () {
                $('#example_table').jExpand();
            });
        </script>


        </div>

</body>
</html>

Followed by this javascript to use plugin that is located in source files:

    <script>
        $(function () {
            $('#example_table').jExpand();
        });
    </script>

As you can see i have made a table with html and i have styled it... i have then used the expand.js in order to attempt making a table that was expandable however it does not seem to be working for me. Any ideas?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Jack H
  • 324
  • 1
  • 3
  • 15

1 Answers1

0

The question is why do you have to set the parameter inside your HTML? Do you have multiple tables in the end in your HTML?

The reason why it does not work is because it is giving the: Uncaught TypeError: $(...).jExpand is not a function.

If you look at this JSFiddle you will that it works: https://jsfiddle.net/k3s8okmo/

JScode:

$( document ).ready(function() {    
    var element = $('#example_table');
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function () {
            $(this).next("tr").toggle();
        });
});
Rotan075
  • 2,567
  • 5
  • 32
  • 54