jquery突出显示（）突破动态表

我正在处理一个突出显示功能的小问题。我基本上以某种方式从与当前表单数据匹配的数据库加载记录。然后，当有人填写表格时，如果他们描述的是我的系统中已经存在的问题，它将突出显示他们的描述与现有记录相同的单词。我的问题是表中断。它会在一定程度上起作用，但有时会将PHP循环部分从表格的其余部分中分离出来，然后它没有格式化，并且突出显示功能不起作用。更具体地说，一旦破坏，表格主体中的td标签不遵循标题行的格式。条件使得所述不期望的效果：jquery突出显示（）突破动态表

通过文本区域互联
如果太多类已被除去或在一次施用（通过删除所有的，增加了许多词语或删除或搜索单个字符与很多出现）

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 width="20" ALIGN="LEFT" height="1">ID</td>'; 
echo ' <td width="89" ALIGN="LEFT" height="1">Date</td> '; 
echo ' <td width="200" ALIGN="LEFT" height="1" >Description</td>'; 
echo ' <td width="89" ALIGN="LEFT" height="1" >Solution</td>'; 
echo ' <td width="20" ALIGN="LEFT" height="1" >User:</td>'; 
echo ' <td ALIGN="LEFT" height="1" >Key?:</td>'; 
echo ' <td ALIGN="LEFT" height="1" >Part:</td>'; 
echo ' <td ALIGN="LEFT" height="1" >Classified As:</td>'; 
echo ' </tr> '; 
for ($i=1; $i <= $num_results; $i++) 
    { 
    $row = mysql_fetch_array($result1); 

    echo '<TR BGCOLOR="#EFEFEF">'; 
    echo '<TD width="20">'; 
    echo stripslashes($row['0']) ; 
    echo '</TD>'; 
    echo '<TD width="89" >'; 
    echo $row['1'] ; 
    echo '</TD>'; 
    echo '<TD width="200">'; 
    echo stripslashes($row['6']) ; 
    echo '</TD>'; 
    echo '<TD width="89">'; 
    echo stripslashes($row['11']) ; 
    echo '</TD>'; 
    echo '<TD width="20">'; 
    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>"; 
      }); 
     }); 
    }); 
};

我想我应该添加一个测试空着某种逃生，要解决第一个条件，但第二个条件，我不知道发生了什么。任何建议绝对赞赏。对不起，这篇文章是巨大而复杂的，但我希望每个人都能获得我可以提供的所有信息。

来源

2012-10-17 Andy Foster

你可以张贴jsFiddle来重现这个问题吗？ –

我会尝试拿出一些测试值来使用，但是，我会给它一个旋转。 –

http://jsfiddle.net/gVjrZ/ –

$(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); 
     }); 
     });

隐藏表克隆，替换为新编辑，修复。

来源

2012-10-18 18:30:01

jquery突出显示（）突破动态表

回答

相关问题