jquery highlight() 打破动态表

Posted 2023-05-09

【中文标题】jquery highlight() 打破动态表

【英文标题】：jquery highlight() breaking in dynamic table

【发布时间】：2012-10-08 02:32:08

【问题描述】：

我正在处理的突出显示功能有点问题。我基本上从数据库中加载以某些方式匹配当前表单数据的记录。然后，当有人填写表格时，如果他们正在描述我的系统中已经存在的问题，它将突出显示他们的描述与现有记录有共同之处的词。我的问题是桌子坏了。它会在一定程度上起作用，但有时它会将 php 循环部分从表格的其余部分中分离出来，然后它就没有格式，高亮功能也不起作用。更具体地说，一旦损坏，表格正文中的 td 标记就不会遵循标题行的格式。 导致不良影响的条件：

在文本区域中切换 如果必须一次删除或应用太多类（通过删除所有、添加许多单词或删除或搜索多次出现的单个字符）

主页上的html && 脚本触发高亮

<textarea name="description" id="description"></textarea>
<script>
 var delay = (function()
 var timer = 0;
 return function(callback, ms)
 clearTimeout (timer);
 timer = setTimeout(callback, ms);
 ;
 )();
 $(function()
    $("#description").keydown(function()
    delay((function()
    $("#displayer *").removeClass('highlight');
    var1 = $('textarea#description').val().split(' ');
    for (var i=0;i<var1.length;i++)
    $("#displayer *").highlight(var1[i], "highlight");
    ),1000);
    );
    );
 </script>

基于ajax调用构建搜索表的外部php是这样的：

echo '<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="5" id="displayer"><FONT     FACE="ARIAL">';

   echo ' <tr> '; 
echo '   <td  ALIGN="LEFT" >ID</td>'; 
echo '   <td  ALIGN="LEFT" >Date</td> '; 
echo '   <td  ALIGN="LEFT"  >Description</td>'; 
echo '   <td  ALIGN="LEFT"  >Solution</td>'; 
echo '   <td  ALIGN="LEFT"  >User:</td>'; 
echo '   <td ALIGN="LEFT"  >Key?:</td>';
echo '   <td ALIGN="LEFT"  >Part:</td>';
echo '   <td ALIGN="LEFT"  >Classified As:</td>';
echo ' </tr>   '; 
 for ($i=1; $i <= $num_results; $i++)
    
   $row = mysql_fetch_array($result1); 

     echo '<TR BGCOLOR="#EFEFEF">';
     echo '<TD >';
     echo  stripslashes($row['0']) ;
     echo '</TD>';
     echo '<TD  >';
     echo  $row['1'] ;
     echo '</TD>';
     echo '<TD >';
     echo  stripslashes($row['6']) ;
     echo '</TD>';
     echo '<TD >';
     echo  stripslashes($row['11']) ;
     echo '</TD>';
     echo '<TD  >';
     echo  $row['5'] ;
     echo '</TD>';
      echo '<TD>';
      if ($row['8'] == 1)
     echo  'Yes' ;
     else 
     echo 'No' ;

     echo '</TD>';
     echo '<td>'.$row['10'].'</td>';
     echo '<td>'.$row['9'].'</td>';

     echo '</TR>';

    
         echo '</TABLE>';

外部高亮插件：

jQuery.fn.highlight = function (str, className) 
    var regex = new RegExp(str, "gi");
    return this.each(function () 
        $(this).contents().filter(function() 
            return this.nodeType == 3 && regex.test(this.nodeValue);
        ).replaceWith(function() 
            return (this.nodeValue || "").replace(regex, function(match) 
                return "<span class=\"" + className + "\">" + match + "</span>";
            );
        );
    );
;

我认为我应该添加一个带有某种转义的空测试，以解决第一个条件，但对于第二个，我不确定发生了什么。任何建议都绝对值得赞赏。抱歉，帖子内容庞大且令人费解，但我希望每个人都能获得我能提供的所有信息。

【问题讨论】：

你能在 jsFiddle 上发布一些东西来重现这个问题吗？

我会尝试想出一些测试值来使用，但是，我会试一试。

尝试运行它，如果数组足够长，它就会中断。你看不到表格在这个中失去了它的格式，因为表格没有太多的格式，但是如果它足够长，它在第一次之后仍然无法工作。

我无法重现这个，至少在 Chrome 上，大约有 10 行数据。

即使在您开始删除之后？这是我第一次打破。 Chrome 也是如此。

【参考方案1】：

$(function()
    $("#description").keydown(function()
        delay((function()
        var divClone = $("#disp_hidden .serial_display").clone();
        $("#displayer .serial_display").replaceWith(divClone);
                if ($.trim($('textarea#description').val()) != '')
                var1 = $('textarea#description').val().trim().split(' ');
            for (var i=0;i<var1.length;i++)
            $("#displayer *").highlight(var1[i], "highlight");
            ;
        ),1000);
        );
        );

隐藏表克隆，在新编辑时替换，已修复。