jquery highlight () ломается в динамической таблице
У меня есть небольшая проблема с функцией выделения, над которой я работаю. Я в основном загружаю записи из базы данных, которые определенным образом соответствуют текущим данным формы. Затем, когда кто-то заполняет форму, если он описывает проблему, которая уже существует в моей системе, он выделит слова, которые его описание имеет общего с существующими записями. Моя проблема в том, что стол ломается. Это будет работать до некоторой степени, но иногда это разрывает часть цикла 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>
внешний php, который создает искомую таблицу на основе вызова ajax, выглядит так:
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>";
});
});
});
};
Я думаю, что я должен добавить тест на пустоту с каким-то побегом, чтобы решить первое условие, но со вторым я не уверен, что происходит. Любые предложения, безусловно, приветствуются. Извините за огромный и запутанный пост, но я хотел, чтобы у всех была вся информация, которую я мог предоставить