Question

我已经使用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谢谢！加载后，在文本框中输入任何文本，然后向下滚动 - 文本从框中消失;向上滚动 - 再次出现。我理解为什么，但不知道如何同步。

Answer 1

使用此脚本... DEMO

$(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或关注其他一些元素。

Answer 2

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

Answer 3

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

$(document).on('blur', 'th input', function(e){
    $('th input[name="' + e.target.name +'"]').val(e.target.value);
});

保持文本框隐藏并同步显示

3 个答案: