Question

我在Javascript / Jquery上非常糟糕。现在已经不在了，我需要一些帮助来搜索动态构建的表。这是问题所在：在我的asp站点的页面加载中，转发器已绑定，并且表格已填充。我可以使用一些甜蜜的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(){ . . . . })

在你的TABLE中添加新的ROWS时，需要再次调用事件，因为jQuery被加载了HTML元素的旧结构。

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

function search(){ $('.search').unbind('keyup').bind('keyup', function(){ . . . }); } search();

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

search();

干杯，

Answer 2

我发现了问题！

每当我向表中添加新行时，我都会将其添加到thead中。结果，搜索功能只是跳过那些新行。通过简单地将我的jquery选择器更改为以下内容，我就可以向tbody添加内容，而不是thead。

 $('#debugTable tbody tr:first')

与

相反

  $('#debugTable tr:first')

向Cícero Feijó致敬，他帮助我完成了搜索功能和事件绑定/解除绑定。我已经将他的回答标记为答案，因为这是正确的方法，这只是我的代码中的一个小疏忽，阻止了他的解决方案的工作。

添加新行后，在jQuery中搜索表

2 个答案: