2014-02-07 3 views
0

Я извлекаю данные, используя ключевое слово Like, что означает, что результаты могут не совпадать. Теперь я хочу выделить searched string всю информацию? Я показываю данные в table. Есть ли простой способ сделать это?Как выделить искомую строку в результате?

Here is code to show data

<table class="table table-striped table-bordered bootstrap-datatable datatable"> 
    <thead> 
     <tr> 
      <th>Surah</th> 
      <th>Ayah</th> 
      <th>Contents</th> 
     </tr> 
</thead> 
    <tbody>  
    @foreach (var n in @ViewBag.test) 
    { 
     <tr> 
     <td class="center"> @n.surah_name </td> 
     <td class="center"> @n.ayah </td> 
     <td style="text-align:right; font-size: 20px; height:90px; vertical-align:middle; line-height : 75px"> @n.verse </td> 
     </tr> 
    } 

     </tbody></table> 

я хочу выделить на события нажатия кнопки!

+0

Вы делаете это исключительно в JS? И еще, покажите еще более подходящий код, пожалуйста. –

+0

Возможный дубликат: http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript – markusthoemmes

+1

Я добавил код. @DanielLisik –

ответ

2
// escape by Colin Snover 
// Note: if you don't care for(), you can remove it.. 
RegExp.escape = function(text) { 
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
} 

function highlight(term, base) { 
    if (!term) return; 
    base = base || document.body; 
    var re = new RegExp("(" + RegExp.escape(term) + ")", "gi"); //... just use term 
    var replacement = "<span class='highlight'>" + term + "</span>"; 
    $("*", base).contents().each(function(i, el) { 
    if (el.nodeType === 3) { 
     var data = el.data; 
     if (data = data.replace(re, replacement)) { 
     var wrapper = $("<span>").html(data); 
     $(el).before(wrapper.contents()).remove(); 
     } 
    } 
    }); 
} 

function dehighlight(term, base) { 
    var text = document.createTextNode(term); 
    $('span.highlight', base).each(function() { 
    this.parentNode.replaceChild(text.cloneNode(false), this); 
    }); 
} 

See it in action

От: https://stackoverflow.com/a/3241437/3272179

+0

работает отлично! :) @Zealot –

Смежные вопросы