javascript - 添加新行后在 jQuery 中搜索表

Question

我不太擅长 Javascript/Jquery。现在这已经不成问题了，我需要一些帮助来搜索动态构建的表。问题是这样的:在我的 asp 站点的页面加载上，中继器被绑定(bind)，并且表格被填充。我可以使用一些很棒的 JavaScript 函数来过滤表格，效果非常好。不幸的是，我还依赖 SignalR 将一些实时数据获取到表中(它是另一个软件项目的调试记录器)。使用 SignalR 和 jQuery，我可以在顶部添加新的表格行并删除最后一行，以便所有内容保持相同的大小。 但是，一旦将新行添加到表中，我的 Javascript 搜索就会中断，并且无法搜索新添加的行。 我假设 javascript 在表上执行某种索引，但是我不确定这是否正确，如果是，我可以重新索引吗？是的，我已经正确链接了 signalr 和 jquery。谢谢!

下面您将找到所有相关代码

HTML/ASP:

            <HeaderTemplate>

                <table id="debugTable"  class="table table-bordered table-condensed">
                    <thead>
                        <tr >
                            <th  >Time Stamp</th>
                            <th >Level</th>
                            <th >Logger</th>
                            <th >Message</th>


                        </tr>
                    </thead>
                    <tbody class="list">
            </HeaderTemplate>
            <ItemTemplate>

                <tr >

                    <td class="timestamp"><%#Eval("Time_Stamp")%></td>     
                    <td class="debuglevel" ><%#Eval("Level")%></td>
                    <td class="logger"><%#Eval("Logger")%></td>
                    <td  class="message"><%#Eval("Message")%></td>                 
                </tr>
            </ItemTemplate>

            <FooterTemplate>
                </tbody>
                </table>
            </FooterTemplate>

        </asp:Repeater>

Javascript:

<script type="text/javascript">


    $(function () {
        var myChatHub = $.connection.myChatHub;
        myChatHub.client.newMessageReceived = function (time, level, logger, text) {




            $('#debugTable tr:first').after('<tr> <td>' + time + '</td><td class="debuglevel">' + level + '</td><td>' + logger + '</td><td>' + text + '</td> </tr>');



            $('#debugTable tr:last').remove();
}
 });


 $('.search').keyup(function() {
       $.each($(".list").find("tr"), function () {
           if ($(this).text().toLowerCase().indexOf($('.search').val().toLowerCase()) == -1)
               $(this).hide();
           else
               $(this).show();
       });
   });

</script>

Answer 1

你的搜索功能是这个吗？

$('.search').keyup(function(){ . . . . })

每当您在表中添加新的行时，都需要再次调用该事件，因为 jQuery 已加载 HTML 元素的旧结构。

因此，为了防止页面中发生链式事件并解决问题，您需要将实现更改为:

函数搜索(){ $('.search').unbind('keyup').bind('keyup', function(){ ... }); } 搜索();

每次在表中添加新行时都调用该函数:

搜索();

干杯，