0

在头上我只有这些文件：

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

... Expand.js 里面只有这个：

(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);

并且 css 文件只有表格的样式：

#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;
}

的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>

跟着这个 javascript 使用位于源文件中的插件：

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

正如你所看到的，我已经用 html 制作了一个表格，并对其进行了样式设置......然后我使用了 expand.js 来尝试制作一个可扩展的表格，但它似乎对我不起作用。有任何想法吗？

4

1 回答 1

0

问题是为什么必须在 HTML 中设置参数？您的 HTML 中到底有多个表格吗？

它不起作用的原因是因为它给出了：Uncaught TypeError: $(...).jExpand is not a function。

如果您查看此 JSFiddle，您会发现它有效：https ://jsfiddle.net/k3s8okmo/

代码：

$( 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();
        });
});
于 2015-04-29T14:52:11.540 回答