创建一个具有父/子和+/-响应按钮的类似datatables.net示例的表

Question

我正在尝试构建与https://datatables.net/上的示例相同的表

下面是我已经有的代码，有人能帮我找出我遗漏了什么吗？

这是在wordpress网站上构建的，所以wordpress已经在调用jquery了。以下是该网站的链接：http://dev.americasfinestlighting.com/products/annandale-column-mount-2/

http://pastebin.com/D0w89Grx

我希望有移动设备的亲子关系。如果您调整上面的示例链接的大小，您将看到绿色和红色的展开/收缩按钮。

谢谢，威廉

Answer 1

您正在尝试调用样式表中的DataTable()函数。将<style>标签更改为<script>。

<script type="text/javascript">
$(document).ready(function(){
    $('#myTable').DataTable();
});
</script>

DataTable需要jQuery，但您只包含了DataTable。您还需要包含对DataTable的响应式扩展(请参阅此处：https://datatables.net/download/release)。复制到Codepen，包含jQuery并满足所有依赖项：http://codepen.io/anon/pen/PNJqqz

Answer 2

您需要更改<script>的<style>标记，不同之处在于该标记将更改基本样式代码，例如：

<style type="text/css"> //this change the H1 elements properties
   H1 {border-width: 1; 
   border: solid; 
   text-align: center}
 </style>

<script>标记包含如下脚本代码：

<script type="text/javascript">
   document.write("Hello Javascript!")
</script>