1

我使用StickyTableHeaders jQuery 插件让我的页面范围表的标题贴在顶部。我想将过滤器框（常规INPUT文本标签）添加到表格的TH. 问题是如果我在克隆标题之前将文本输入到输入框中（要“粘性”），则克隆没有我输入的文本。反之亦然。据我所知，当隐藏/取消隐藏 html 元素时不会触发任何事件。如何使原始标题和克隆的“粘性”标题之间的文本保持同步？通过修改插件（我不太了解 jQuery）或非 jQuery 方式。

<table id="xxx">
    <colgroup>
       <col span="1" style="width: 100px" />
       <col span="1" style="width: 200px" />
       <col span="1" />
    </colgroup>
    <thead>
        <tr>
            <th class="bID">ID</th>
            <th class="bStatus"><span class="statusCol">Status</span></th>
            <th class="bSummary">Summary <input type="text" name="firstname"/></th>
        </tr>
    </thead>
    <tbody>
        <tr class="can">
            <td class="bID">...</td>
            <td class="bStatus">...</td>
            <td class="bSummary">...</td>
        </tr>

编辑：

jsfiddle.net/tsLxz谢谢！加载后，在文本框中输入任何文本，然后向下滚动——文本从框中消失；向上滚动 - 再次出现。我明白为什么，但不知道如何同步。

4

3 回答 3

1

使用这个脚本...演示 

$(function() {
    $('#defectsList').stickyTableHeaders();
});


$(document).on('change','[name=filterBox]',function(){

    $(document).data('Textval',$(this).val());
}); 
$(window).scroll(function(){
          $('[name=filterBox]').val($(document).data('Textval'));
});

注意：我使用change的是在文本框为tabbed off. 所以在开始滚动之前记住tab off或关注其他元素。

于 2013-06-01T06:44:13.943 回答
0

问题似乎是您将<input>元素嵌套在th标签内。如果您滚动得很慢，您会看到它附加到文档的顶部。也许尝试使用appendTo()from javascript 来查看是否可以动态地将内容附加到该特定标头（给它一个 id 或不同的类名）。只是我从摆弄它中得到的一个想法。希望能帮助到你。

于 2013-05-31T17:16:17.217 回答
0

实际上，插件的作者提出了更优雅的解决方案：

$(document).on('blur', 'th input', function(e){
    $('th input[name="' + e.target.name +'"]').val(e.target.value);
});
于 2013-06-01T15:22:32.807 回答