jQuery UI 主题和 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2613632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI themes and HTML tables
提问by leora
Is there any way to theme an HTML table (CSS) with using the jQuery CSS themes?
有什么方法可以使用 jQuery CSS 主题为 HTML 表 (CSS) 设置主题？
All of my components look like they belong together except for my HTML table which looks different.
除了我的 HTML 表格看起来不同之外，我的所有组件看起来都属于一个整体。
回答by dochoffiday
There are a bunch of resources out there:
那里有一堆资源：
Plugins with ThemeRoller support:
支持 ThemeRoller 的插件：
UPDATE: Here is something I put together that will style the table:
更新：这是我将表格放在一起的内容：
<script type="text/javascript">
(function ($) {
$.fn.styleTable = function (options) {
var defaults = {
css: 'styleTable'
};
options = $.extend(defaults, options);
return this.each(function () {
input = $(this);
input.addClass(options.css);
input.find("tr").live('mouseover mouseout', function (event) {
if (event.type == 'mouseover') {
$(this).children("td").addClass("ui-state-hover");
} else {
$(this).children("td").removeClass("ui-state-hover");
}
});
input.find("th").addClass("ui-state-default");
input.find("td").addClass("ui-widget-content");
input.find("tr").each(function () {
$(this).children("td:not(:first)").addClass("first");
$(this).children("th:not(:first)").addClass("first");
});
});
};
})(jQuery);
$(document).ready(function () {
$("#Table1").styleTable();
});
</script>
<table id="Table1" class="full">
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
The CSS:
CSS：
.styleTable { border-collapse: separate; }
.styleTable TD { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.styleTable TH { text-align: center; padding: .8em .4em; }
.styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }
回答by Jon
dochoffiday's answeris a great starting point, but for me it did not cut it (the CSS part needed a buff) so I made a modified version with several improvements.
dochoffiday 的回答是一个很好的起点，但对我来说它并没有削减它（CSS 部分需要一个 buff）所以我做了一个修改过的版本，并做了一些改进。
See it in action, then come back for the description.
JavaScript
JavaScript
(function ($) {
$.fn.styleTable = function (options) {
var defaults = {
css: 'ui-styled-table'
};
options = $.extend(defaults, options);
return this.each(function () {
$this = $(this);
$this.addClass(options.css);
$this.on('mouseover mouseout', 'tbody tr', function (event) {
$(this).children().toggleClass("ui-state-hover",
event.type == 'mouseover');
});
$this.find("th").addClass("ui-state-default");
$this.find("td").addClass("ui-widget-content");
$this.find("tr:last-child").addClass("last-child");
});
};
})(jQuery);
Differences with the original version:
与原版的区别：
- the default CSS class has been changed to
ui-styled-table(it sounds more consistent) - the
.livecall was replaced with the recommended.onfor jQuery 1.7 upwards - the explicit conditional has been replaced by
.toggleClass(a terser equivalent) - code that sets the misleadingly-named CSS class
firston table cells has been removed - the code that dynamically adds
.last-childto the last table row is necessary to fix a visual glitch on Internet Explorer 7 and Internet Explorer 8; for browsers that support:last-childit is not necessary
- 默认的 CSS 类已更改为
ui-styled-table（听起来更一致） - 该
.live调用已替换.on为 jQuery 1.7 以上的推荐 - 显式条件已被替换为
.toggleClass（更简洁的等价物） first在表格单元格上设置误导性命名的 CSS 类的代码已被删除- 动态添加
.last-child到最后一行的代码是修复 Internet Explorer 7 和 Internet Explorer 8 上的视觉故障所必需的；对于支持:last-child它的浏览器是没有必要的
CSS
CSS
/* Internet Explorer 7: setting "separate" results in bad visuals; all other browsers work fine with either value. */
/* If set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td { border-left-width: 0px !important; } */
table.ui-styled-table { border-collapse: collapse; }
/* Undo the "bolding" that jQuery UI theme may cause on hovered elements
/* Internet Explorer 7: does not support "inherit", so use a MS proprietary expression along with an Internet Explorer <= 7 targeting hack
to make the visuals consistent across all supported browsers */
table.ui-styled-table td.ui-state-hover {
font-weight: inherit;
*font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}
/* Initally remove bottom border for all cells. */
table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }
/* Hovered-row cells should show bottom border (will be highlighted) */
table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }
/* Remove top border if the above row is being hovered to prevent double horizontal borders. */
table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 0px !important; }
/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 7, Internet Explorer 8: selector dependent on CSS classes because of no support for :last-child */
table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }
/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* Internet Explorer 9 and later, Firefox, Chrome: make sure the visuals are working even without the CSS classes crutch. */
table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }
Notes
笔记
I have tested this on Internet Explorer 7 and upwards, Firefox 11 and Google Chrome 18 and confirmed that it works perfectly. I have nottested reasonably earlier versions of Firefox and Chrome or any version of Opera; however, those browsers are well-known for good CSS support and since we are not using any bleeding-edge functionality here I assume it will work just fine there as well.
我已经在 Internet Explorer 7 及更高版本、Firefox 11 和 Google Chrome 18 上对此进行了测试，并确认它可以完美运行。我没有测试过较早版本的 Firefox 和 Chrome 或任何版本的Opera；然而，这些浏览器以良好的 CSS 支持而闻名，而且由于我们在这里没有使用任何前沿功能，我认为它在那里也能正常工作。
If you are not interested in Internet Explorer 7 support there is one CSS attribute (introduced with the star hack) that can go.
如果您对 Internet Explorer 7 支持不感兴趣，则可以使用一个 CSS 属性（与 star hack 一起引入）。
If you are not interested in Internet Explorer 8 support either, the CSS andJavaScript related to adding and targeting the last-childCSS class can go as well.
如果您对 Internet Explorer 8 支持也不感兴趣，那么与添加和定位CSS 类相关的 CSS和JavaScriptlast-child也可以使用。
回答by Marco Muci?o
Why noy just use the theme styles in the table? i.e.
为什么不使用表格中的主题样式？IE
<table>
<thead class="ui-widget-header">
<tr>
<th>Id</th>
<th>Description</th>
</td>
</thead>
<tbody class="ui-widget-content">
<tr>
<td>...</td>
<td>...</td>
</tr>
.
.
.
</tbody>
</table>
And you don't need to use any code...
而且你不需要使用任何代码......
回答by Jeremy Thompson
I've got a one liner to make HTML Tables look BootStrapped:
我有一个单衬让 HTML 表格看起来像 BootStrapped：
<table class="table table-striped table-bordered table-hover">
The theme suits other controls and it supports alternate row highlighting.
该主题适合其他控件，并支持交替行突出显示。
