如何在同一页面上为多个（jQuery）jTable 设置不同的主题？答案

【问题标题】：How can I set different themes to multiple (jQuery) jTable on the same page?如何在同一页面上为多个（jQuery）jTable 设置不同的主题？
【发布时间】：2015-04-15 23:23:04
【问题描述】：

我需要在同一页面上放置不同的jTable。

如何为每张桌子设置不同的主题？

我尝试过类似的方法：

$('#TableContainer').jtable({
                    jqueryuiTheme: 'js/jtable/themes/metro/blue/jtable.min.css',
                    title: 'My table title',
                    actions: {
                       .......

但它不起作用。

【问题讨论】：

我不知道 jTable，但是如何在您的表格中使用一个类来处理常规设置并为每个表格设置一个 id 来设置样式？

标签： jquery jquery-jtable

【解决方案1】：

来自documentation of jTable 很明显，他们正在使用 jquery-ui themeroller 作为主题，

jTable 有自己的主题，可以轻松使用。但是，你可能想要使用 jQueryUI 的颜色模式和样式作为 jTable 的主题。所以，此选项可用于声明 jTable 使用 jQueryUI 的颜色和样式。为此，请在您的 jTable 中设置 jqueryuiTheme: true 初始化代码

那么，接下来是如何在一个页面中使用多个主题的问题。

jQuery UI 提供了在主题中定义CSS Scope 的方法。因此，您可以为主题定义自己的包装器，从而允许您在单个页面中使用多个主题。

请查看Q/A了解更多详情。

所以当你用CSS Scope 下载主题后，主题文件会是这样的，

CSS 范围 = table1
主题=阳光

jquery-ui.theme

/* Component containers
----------------------------------*/
table1 .ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}
table1 .ui-widget .ui-widget {
    font-size: 1em;
}
table1 .ui-widget input,
table1 .ui-widget select,
table1 .ui-widget textarea,
table1 .ui-widget button {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1em;
}
..................
.....................
.....................

因此，您可以手动将其添加到您的主题中，也可以从 jquery ui 下载中捆绑它。

而对于 jTable 使用它，

<div class='table1'>//jTable here</div>
<div class='table1'>//jTable here</div>
<div class='table2'>//jTable here</div>

【讨论】：

谢谢，但我不明白。如果我必须通过 id 获取我的表（例如：<div id="Table1Container"></div>），我是否需要像这样包装它<div class='table1'><div id="Table1Container"></div></div>？此外，我在哪里设置主题路径？
我也尝试在同一个 div <div id="Table1Container" class="table1"></div> 上添加类，但还是不行。
好的，问题是主题范围开头缺少点：CSS Scope = .table1