Question

是否有任何好的和最小的插件可以修复<thead>或第一行？并且不要自动添加<tbody>。

当我使用<thead>包装第一行（直接在HTML表格中）时，一切正常，因为它应该适用于我的表。但是当我添加<thead>来包装第一行（不是HTML而是通过jquery）$("tr").first().wrap("<thead></thead>");然后它正在工作但不能正常显示，因为它首先将整个表包装在{{1}中然后自动在第一行添加<tbody>。

请告诉我如何解决这个问题，因为我的表格中没有HTML <thead>。但我需要它来修复滚动时的第一行，因为所有jQuery插件都要求<thead>修复第一行，请帮助

工作：http://jsfiddle.net/seky66cb/（在HTML中添加<thead>）

不适合我：http://jsfiddle.net/seky66cb/1/（使用jQuery添加<thead>）

CODE（未按预期工作）：

图书馆：<thead>

HTML：

jQuery: 2.1.3

jQuery的：

<table class="gridView" id="table2">

<tr>
<th> Culture Name </th>
<th> Display Name </th>
<th> Culture Code </th>
<th> ISO 639x </th>
</tr>

<tr class="grid">
<td> af-ZA </td>
<td> Afrikaans - South Africa </td>
<td> 0x0436 </td>
<td> AFK </td>
</tr>
<tr class="gridAlternada">
<td> sq-AL </td>
<td> Albanian - Albania </td>
<td> 0x041C </td>
<td> SQI </td>
</tr>
<tr class="grid">
<td> ar-DZ </td>
<td> Arabic - Algeria </td>
<td> 0x1401 </td>
<td> ARG </td>
</tr>
<tr class="gridAlternada">
<td> ar-BH </td>
<td> Arabic - Bahrain </td>
<td> 0x3C01 </td>
<td> ARH </td>
</tr>
<tr class="grid">
<td> ar-EG </td>
<td> Arabic - Egypt </td>
<td> 0x0C01 </td>
<td> ARE </td>
</tr>
<tr class="gridAlternada">
<td> ar-IQ </td>
<td> Arabic - Iraq </td>
<td> 0x0801 </td>
<td> ARI </td>
</tr>
<tr class="grid">
<td> ar-JO </td>
<td> Arabic - Jordan </td>
<td> 0x2C01 </td>
<td> ARJ </td>
</tr>
<tr class="gridAlternada">
<td> ar-KW </td>
<td> Arabic - Kuwait </td>
<td> 0x3401 </td>
<td> ARK </td>
</tr>
<tr class="grid">
<td> ar-LB </td>
<td> Arabic - Lebanon </td>
<td> 0x3001 </td>
<td> ARB </td>
</tr>
<tr class="gridAlternada">
<td> ar-LY </td>
<td> Arabic - Libya </td>
<td> 0x1001 </td>
<td> ARL </td>
</tr>
<tr class="grid">
<td> ar-MA </td>
<td> Arabic - Morocco </td>
<td> 0x1801 </td>
<td> ARM </td>
</tr>
<tr class="gridAlternada">
<td> ar-OM </td>
<td> Arabic - Oman </td>
<td> 0x2001 </td>
<td> ARO </td>
</tr>
<tr class="grid">
<td> ar-QA </td>
<td> Arabic - Qatar </td>
<td> 0x4001 </td>
<td> ARQ </td>
</tr>
<tr class="gridAlternada">
<td> ar-SA </td>
<td> Arabic - Saudi Arabia </td>
<td> 0x0401 </td>
<td> ARA </td>
</tr>
<tr class="grid">
<td> ar-SY </td>
<td> Arabic - Syria </td>
<td> 0x2801 </td>
<td> ARS </td>
</tr>
<tr class="gridAlternada">
<td> ar-TN </td>
<td> Arabic - Tunisia </td>
<td> 0x1C01 </td>
<td> ART </td>
</tr>
<tr class="grid">
<td> ar-AE </td>
<td> Arabic - United Arab Emirates </td>
<td> 0x3801 </td>
<td> ARU </td>
</tr>
<tr class="gridAlternada">
<td> ar-YE </td>
<td> Arabic - Yemen </td>
<td> 0x2401 </td>
<td> ARY </td>
</tr>
<tr class="grid">
<td> hy-AM </td>
<td> Armenian - Armenia </td>
<td> 0x042B </td>
<td>&nbsp;</td>
</tr>
<tr class="gridAlternada">
<td> Cy-az-AZ </td>
<td> Azeri (Cyrillic) - Azerbaijan </td>
<td> 0x082C </td>
<td>&nbsp;</td>
</tr>
<tr class="grid">
<td> Lt-az-AZ </td>
<td> Azeri (Latin) - Azerbaijan </td>
<td> 0x042C </td>
<td>&nbsp;</td>
</tr>
<tr class="gridAlternada">
<td> eu-ES </td>
<td> Basque - Basque </td>
<td> 0x042D </td>
<td> EUQ </td>
</tr>
<tr class="grid">
<td> be-BY </td>
<td> Belarusian - Belarus </td>
<td> 0x0423 </td>
<td> BEL </td>
</tr>
<tr class="gridAlternada">
<td> bg-BG </td>
<td> Bulgarian - Bulgaria </td>
<td> 0x0402 </td>
<td> BGR </td>
</tr>
<tr class="grid">
<td> ca-ES </td>
<td> Catalan - Catalan </td>
<td> 0x0403 </td>
<td> CAT </td>
</tr>
<tr class="gridAlternada">
<td> zh-CN </td>
<td> Chinese - China </td>
<td> 0x0804 </td>
<td> CHS </td>
</tr>
<tr class="grid">
<td> zh-HK </td>
<td> Chinese - Hong Kong SAR </td>
<td> 0x0C04 </td>
<td> ZHH </td>
</tr>
<tr class="gridAlternada">
<td> zh-MO </td>
<td> Chinese - Macau SAR </td>
<td> 0x1404 </td>
<td>&nbsp;</td>
</tr>
<tr class="grid">
<td> zh-SG </td>
<td> Chinese - Singapore </td>
<td> 0x1004 </td>
<td> ZHI </td>
</tr>
<tr class="gridAlternada">
<td> zh-TW </td>
<td> Chinese - Taiwan </td>
<td> 0x0404 </td>
<td> CHT </td>
</tr>
<tr class="grid">
<td> zh-CHS </td>
<td> Chinese (Simplified) </td>
<td> 0x0004 </td>
<td>&nbsp;</td>
</tr>
<tr class="gridAlternada">
<td> zh-CHT </td>
<td> Chinese (Traditional) </td>
<td> 0x7C04 </td>
<td>&nbsp;</td>
</tr>
<tr class="grid">
<td> hr-HR </td>
<td> Croatian - Croatia </td>
<td> 0x041A </td>
<td> HRV </td>
</tr>
<tr class="gridAlternada">
<td> cs-CZ </td>
<td> Czech - Czech Republic </td>
<td> 0x0405 </td>
<td> CSY </td>
</tr>
<tr class="grid">
<td> da-DK </td>
<td> Danish - Denmark </td>
<td> 0x0406 </td>
<td> DAN </td>
</tr>
<tr class="gridAlternada">
<td> div-MV </td>
<td> Dhivehi - Maldives </td>
<td> 0x0465 </td>
<td>&nbsp;</td>
</tr>
<tr class="grid">
<td> nl-BE </td>
<td> Dutch - Belgium </td>
<td> 0x0813 </td>
<td> NLB </td>
</tr>
</table>

CSS：

$( "tr" ).first().wrap( "<thead></thead>" );

(function ($) {
    $.fn.freezeHeader = function (params) {
        var copiedHeader = false;
        var idObj = this.selector.replace('#', '');
        var container;
        var grid;
        var conteudoHeader;
        var openDivScroll = '';
        var closeDivScroll = '';

        if (params && params.height !== undefined) {
            divScroll = '<div id="hdScroll' + idObj + '" style="height: ' + params.height + '; overflow-y: scroll">';
            closeDivScroll = '</div>';
        }

        grid = $('table[id$="' + idObj + '"]');
        conteudoHeader = grid.find('thead');

        if (params && params.height !== undefined) {
            if ($('#hdScroll' + idObj).length == 0) {
                grid.wrapAll(divScroll);
            }
        }

        var obj = params && params.height !== undefined
           ? $('#hdScroll' + idObj)
           : $(window);

        if ($('#hd' + idObj).length == 0) {
            grid.before('<div id="hd' + idObj + '"></div>');
        }

        obj.scroll(function () { freezeHeader(); })

        function freezeHeader() {

            if ($('table[id$="' + idObj + '"]').length > 0) {

                container = $('#hd' + idObj);
                if (conteudoHeader.offset() != null) {
                    if (limiteAlcancado(params)) {
                        if (!copiedHeader) {
                            cloneHeaderRow(grid);
                            copiedHeader = true;
                        }
                    }
                    else {

                        if (($(document).scrollTop() > conteudoHeader.offset().top)) {
                            container.css("position", "absolute");
                            container.css("top", (grid.find("tr:last").offset().top - conteudoHeader.height()) + "px");
                        }
                        else {
                            container.css("visibility", "hidden");
                            container.css("top", "0px");
                            container.width(0);
                        }

                        copiedHeader = false;

                    }
                }
            }
        }

        function limiteAlcancado(params) {
            if (params && params.height !== undefined) {
                return (conteudoHeader.offset().top <= obj.offset().top);
            }
            else {
                return ($(document).scrollTop() > conteudoHeader.offset().top && $(document).scrollTop() < (grid.height() - conteudoHeader.height() - grid.find("tr:last").height()) + conteudoHeader.offset().top);
            }
        }

        function cloneHeaderRow() {
            container.html('');
            container.val('');
            var tabela = $('<table style="margin: 0 0;"></table>');
            var atributos = grid.prop("attributes");

            $.each(atributos, function () {

                if (this.name != "id") {
                    tabela.attr(this.name, this.value);
                }
            });

            tabela.append('<thead>' + conteudoHeader.html() + '</thead>');

            container.append(tabela);
            container.width(conteudoHeader.width());
            container.height(conteudoHeader.height);
            container.find('th').each(function (index) {
                var cellWidth = grid.find('th').eq(index).width();
                $(this).css('width', cellWidth);
            });

            container.css("visibility", "visible");

            if (params && params.height !== undefined) {
                container.css("top", obj.offset().top + "px");
                container.css("position", "absolute");
            } else {
                container.css("top", "0px");
                container.css("position", "fixed");
            }
        }
    };
})(jQuery);


        $(document).ready(function () {
            $("#table1").freezeHeader({ 'height': '300px' });
        $("#table2").freezeHeader();

       $("#tbex1").freezeHeader();
            $("#tbex2").freezeHeader();
            $("#tbex3").freezeHeader();
            $("#tbex4").freezeHeader();     



        })

Answer 1

一个简单的解决方案是在<thead>中包装第一行后，将<thead>移出<tbody>并将其添加到表格中。

$( "tr" ).first().wrap( "<thead></thead>" ).parent().prependTo('.gridView');

Updated fiddle

让表包裹在自动中

1 个答案: