Question

第一个示例显示了一个比较表，该表在点击时在列中动态显示数据。当表格已满时，它将删除.addinfo类并返回第二列以替换旧数据。当我尝试使用此page中的固定标头插件时，会出现此问题。它会创建第二个thead以允许th固定在顶部，如下所示：

<table id="toptable" style="padding: 0px;">
<thead class="Original">
    <tr>
        <th style="visibility:hidden">-</th>
        <th class="image addinfo">Fdw</th>
    </tr>
 </thead>

<thead class="Floating" style="display: none;">  //Second Thead//
    <tr>
        <th style="visibility:hidden">-</th>
        <th class="image addinfo">Fdw</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td class="description">Name</td>
        <td class="description addinfo">Fdw</td>

    </tr>
    <tr>
        <td class="title">Age</td>
        <td class="title addinfo">Fdw</td>

    </tr>
        <tr>
        <td class="title">Age</td>
        <td class="title addinfo">Fdw</td>
    </tr>
 <tbody>
</table>

正如您在第二个示例中所看到的，当表格已满时，它无法移除类.addinfo。我想我需要更改脚本中的表选择器才能使其工作。有人能告诉我应该更改哪些表选择器吗？

此代码仅适用于第一个示例：

$(function () {
    function filltable(buttontext) {
        var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;

        i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
            .addClass('addinfo').html(buttontext);
    }

    $('.area').each(function () {
        var area = $(this),
            button = $(this).find('button'),
            buttontext = button.text();
        button.on("click", function () {
            var allCells = $('table').find('th').length-1;
            var fullCells = $('table th.addinfo').length;
            console.log(allCells, fullCells);
            if (allCells === fullCells) { // If table is full
                $('table .addinfo').removeClass('addinfo');
                filltable(buttontext);
            } else { // If table isn't full
                filltable(buttontext);
            }
        });
    });
});

第一个示例标记

    <div class="area">
    <button>Gah</button>
</div>
<div class="area">
    <button>Kaj</button>
</div>
<div class="area">
    <button>Fdw</button>
</div>
<div class="area">
    <button>ffdf</button>
</div>
<table>
    <thead>
        <tr>
            <th>Placeholder</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Age</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Nationality</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Education</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Background</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Language</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 1

更改

var allCells = $('#toptable').find('th').length - 1;

要

var allCells = $('#toptable').find('th').length - 2;

JS FIDDLE DEMO

找不到固定头表的选择器

1 个答案: