thèmes d’interface utilisateur jQuery et tables HTML

Existe-t-il un moyen de thématiser un tableau HTML (CSS) en utilisant les thèmes CSS jQuery?

Tous mes composants semblent appartenir à un groupe différent, à l’exception de mon tableau HTML qui semble différent.

Il y a un tas de ressources là-bas:

Plugins avec prise en charge de ThemeRoller:

jqGrid

DataTables.net

MISE À JOUR: Voici quelque chose que je mets ensemble qui va coiffer la table:

 
one two
1 2
1 2

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

La réponse de dochoffiday est un bon sharepoint départ, mais pour moi, cela n’a pas été le cas (la partie CSS nécessitait un buff), alors j’ai fait une version modifiée avec plusieurs améliorations.

Voir en action, puis revenez pour la description .

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

Différences avec la version originale:

  • la classe CSS par défaut a été remplacée par ui-styled-table (cela semble plus cohérent)
  • l’appel .live été remplacé par le .on recommandé pour jQuery 1.7
  • le conditionnel explicite a été remplacé par .toggleClass (équivalent à un autre)
  • le code qui définit la classe CSS nommée de manière trompeuse en first sur les cellules de tableau a été supprimé
  • le code qui ajoute dynamicment .last-child à la dernière ligne du tableau est nécessaire pour corriger un problème visuel sur Internet Explorer 7 et Internet Explorer 8; pour les navigateurs supportant :last-child ce n’est pas nécessaire

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

Remarques

Je l'ai testé sur Internet Explorer 7 et versions ultérieures, Firefox 11 et Google Chrome 18 et j'ai confirmé que cela fonctionne parfaitement. Je n'ai pas testé de versions relativement plus anciennes de Firefox et de Chrome ou de toute version d' Opera ; Cependant, ces navigateurs sont réputés pour leur bon support CSS et comme nous n'utilisons aucune fonctionnalité de pointe, je suppose que cela fonctionnera très bien là aussi.

Si le support d'Internet Explorer 7 ne vous intéresse pas, il existe un atsortingbut CSS (introduit avec le hack en écanvas) qui peut être utilisé.

Si la prise en charge d'Internet Explorer 8 ne vous intéresse pas non plus, le CSS et le JavaScript associés à l'ajout et au ciblage de la classe CSS last-child peuvent également être utilisés.

Pourquoi utiliser simplement les styles de thème dans le tableau? c’est à dire

  . . . 
Id Description
... ...

Et vous n’avez pas besoin d’utiliser de code …