detail - tag for code html

Temas de jQuery UI y tablas HTML

Question

¿Hay alguna forma de tema una tabla HTML (CSS) con el uso de los temas jQuery CSS?

Todos mis componentes parecen pertenecer juntos, a excepción de mi tabla HTML que se ve diferente.

Answer 1

¿Por qué no solo usas los estilos de tema en la tabla? es decir

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

Y no necesita usar ningún código ...

Answer 2

Hay muchos recursos disponibles:

Complementos con soporte de ThemeRoller:

jqGrid

DataTables.net

ACTUALIZACIÓN: Aquí hay algo que armé que dará estilo a la mesa:

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

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

Answer 3

La answer de dochoffiday es un gran punto de partida, pero para mí no fue suficiente (la parte CSS necesitaba un buff) así que hice una versión modificada con varias mejoras.

Véalo en acción, luego regrese para la descripción .

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

Diferencias con la versión original:

• la clase predeterminada de CSS ha sido cambiada a ui-styled-table (suena más consistente)
• la llamada .live fue reemplazada por la .on recomendada para jQuery 1.7 en .on
• el condicional explícito ha sido reemplazado por .toggleClass (un equivalente de terser)
• código que establece la clase de CSS de nombre engañoso first en las celdas de la tabla ha sido eliminado
• el código que agrega dinámicamente .last-child a la última fila de la tabla es necesario para solucionar un problema visual en Internet Explorer 7 e Internet Explorer 8; para navegadores compatibles :last-child no es necesario

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

Notas

He probado esto en Internet Explorer 7 y versiones posteriores, Firefox 11 y Google Chrome 18 y confirmó que funciona perfectamente. No he probado versiones razonablemente anteriores de Firefox y Chrome o cualquier versión de Opera ; sin embargo, esos navegadores son bien conocidos por su buena compatibilidad con CSS y, dado que no estamos usando ninguna funcionalidad de última generación, supongo que también funcionará bien allí.

Si no está interesado en la compatibilidad con Internet Explorer 7, puede ir un atributo CSS (introducido con el hack estrella).

Si tampoco está interesado en la compatibilidad con Internet Explorer 8, también pueden ir los CSS y JavaScript relacionados con la adición y orientación de la clase CSS del last-child .