jQuery UI主题和HTML表格
有什么办法来使用jQuery CSS主题主题的HTML表格（CSS）？
我的所有组件看起来像是一起属于除了我的HTML表格，看起来不同。
那里有一堆资源：
具有ThemeRoller支持的插件：
jqGrid的
DataTables.net
更新：这是我将放在一起，将风格的表：
<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> 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; }
dochoffiday的答案是一个很好的起点，但对我来说，它并没有削减（CSS部分需要一个BUFF），所以我做了一个修改版本，有几个改进。
看到它的行动，然后回来的描述 。
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);
与原始版本的差异：
- 默认的CSS类已经改成了
ui-styled-table（这听起来更加一致） -
.live调用被replace为jQuery 1.7以上推荐的.on - 显式条件已被replace为
.toggleClass（相当于terser） - 在表单元格上
first设置误导性CSS类的代码已被删除 - dynamic地将
.last-child添加到最后一个表格行的代码对于修复Internet Explorer 7和Internet Explorer 8上的可视故障是必要的; 对于支持的浏览器:last-child是没有必要的
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; }
笔记
我已经在Internet Explorer 7及更高版本，Firefox 11和Google Chrome 18上进行了testing，并确认它可以正常工作。 我还没有testing合理的早期版本的Firefox和Chrome或任何版本的Opera ; 然而，这些浏览器对于良好的CSS支持是众所周知的，因为我们并没有使用任何先进的function，所以我认为它在那里也可以正常工作。
如果您对Internet Explorer 7的支持不感兴趣，那么可以使用一个CSS属性（引入了明星黑客）。
如果您对Internet Explorer 8支持不感兴趣，那么与添加和定位last-child CSS类相关的CSS 和 JavaScript也可以使用。
为什么noy只使用表中的主题风格？ 即
<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>
而且你不需要使用任何代码…
