1. Zuhause
  2. Frage und Antwort
  3. Highlight Texte mit JavaScript oder jQuery

Highlight Texte mit JavaScript oder jQuery

2016-12-18 1 views
0

So bin ich ziemlich neu in JavaScript, so würde ich es wirklich schätzen, wenn jemand kann mir helfen, Grundsätzlich i mit einer HTML-Seite wie die arbeite untenHighlight Texte mit JavaScript oder jQuery

Jetzt bin ich nur interessiert an der Level-Spalte des HTML-Codes, möchte ich mein JavaScript oder jQuery-Skript zu jedem Fall mit Level 3 in roter Hintergrundfarbe markieren, wäre jeder Beispielcode oder Demo sehr hilfreich :)

EDIT: Um klar zu sein Ich möchte, dass das Skript alle Zeilen überprüft und prüft, ob der Level 3 ist und dann diesen speziellen Fall mit roter Hintergrundfarbe hervorheben, nicht wenn das Kontrollkästchen aktiviert ist !, und ich habe Zugriff auf die Server-Seite HTML-Dateien, die ist Warum benutze ich Javascript, um dies lokal zu tun, um die Seite wie ein Plugin zu verändern.


 
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%"> 
 
    <thead> 
 
    <tr class="sr-header"> 
 
     <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th> 
 
     <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th> 
 
     <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th> 
 
     <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th> 
 
     <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th> 
 
     <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th> 
 
     <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th> 
 
     <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th> 
 
     <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th> 
 
     <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="sr-light-band"> 
 
     <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 
     <input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox"> 
 
     </td> 
 

 
     <td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td> 
 
     <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="Case1" style="position:relative; overflow:hidden; height:100%"> 
 
      <div style="position:absolute; white-space:nowrap"> 
 
      <a title="Case1">Case1</a> 
 
      </div> 
 
      &nbsp; 
 
     </div> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="Jussi" style="position:relative; overflow:hidden; height:100%"> 
 
      <div style="position:absolute; white-space:nowrap"> 
 
      </div> 
 
      &nbsp; 
 
     </div> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left">3</td> 
 
     <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="right"></td> 
 
     <td class="small" <nobr="" valign="top" align="right"></td> 
 
    </tr> 
 
    <tr class="sr-dark-band"> 
 
     <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 
     <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox"> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td> 
 
     <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="Case2" style="position:relative; overflow:hidden; height:100%"> 
 
      <div style="position:absolute; white-space:nowrap"> 
 
      <a title="Case2">Case2</a> 
 
      </div> 
 
      &nbsp; 
 
     </div> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="" style="position:relative; overflow:hidden; height:100%"> 
 
      <div style="position:absolute; white-space:nowrap"> 
 
      <a href="" title=""></a> 
 
      </div> 
 
      &nbsp; 
 
     </div> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left">4</td> 
 
     <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="left"></td> 
 
     <td class="small" <nobr="" valign="top" align="right"></td> 
 
     <td class="small" <nobr="" valign="top" align="right"></td> 
 
    </tr> 
 
    <tr class="sr-light-band"> 
 
     <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 
     <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox"> 
 
     </td> 
 
     <td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td> 
 
     <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="Case3"position:absolute; white-space:nowrap"> 
 
      <a title="Case3">Case3</a> 
 
     </div> 
 
     &nbsp; 
 
     </div> 
 
    </td> 
 
    <td class="small" <nobr="" valign="top" align="left"> 
 
     <div title="Jussi" style="position:relative; overflow:hidden; height:100%"> 
 
     <div style="position:absolute; white-space:nowrap"> 
 
     </div> 
 
     &nbsp; 
 
     </div> 
 
    </td> 
 
    <td class="small" <nobr="" valign="top" align="left">3</td> 
 
    <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 
    <td class="small" <nobr="" valign="top" align="left"></td> 
 
    <td class="small" <nobr="" valign="top" align="left"></td> 
 
    <td class="small" <nobr="" valign="top" align="left"></td> 
 
    <td class="small" <nobr="" valign="top" align="right"></td> 
 
    <td class="small" <nobr="" valign="top" align="right"></td> 
 
    </tr> 
 
</tbody> 
 
</table>

Quelle

2016-12-18 Cyb3rHac3r

+0

http://jsbin.com/ozarov/3/edit?html,js,output –

+0

mit einer kleinen Änderung, die Sie könnte es tun nur mit CSS. Fügen Sie einfach den Level-Wert als Attributwert in das td-Element ein. Dann können Sie die css-Selektoren für Attributwerte verwenden. – Legends

+0

Hallo, Danke für den Code aber, ich möchte nicht den Text markieren, wenn das Kontrollkästchen aktiviert ist, ich möchte das Skript überprüfen, ob die Fallzeile Ebene 3 hat, wenn ja, dann markieren, Kontrollkästchen ist irrelevant. – Cyb3rHac3r

Antwort

1 
$(document).ready(function() { 

    var levelColumnIndex = 5; 
    $('tr td:nth-child('+levelColumnIndex+')').each(function() { 
    var cellText = $(this).html(); 
    if(cellText == 3){ 
       $(this).parent().css('background-color','red'); 
    } 
    }); 
});

Dies sollte nur Zeilen markieren, deren Level-Wert gleich 3 ist. Natürlich basiert diese Lösung auf dem Spaltenindex, der vorher bekannt sein sollte. Glücklicherweise behandelt jQuery nth-child, da keine native Browserunterstützung zur Verfügung steht. Sie sollten sich also nicht darum kümmern, wenn Ihr Browser dies nicht unterstützt.

Hier ist ein funktionierendes Demo meiner Lösung JSFiddle

Quelle

2016-12-18 10:59:40

0

du versuchen ..

function hiliter(word, element) { 
    var rgxp = new RegExp(word, 'g'); 
    var repl = '<span class="myClass">' + word + '</span>'; 
    element.innerHTML = element.innerHTML.replace(rgxp, repl); 
} 
hiliter('dolor');

Quelle

2016-12-18 10:23:10

0 

$(document).ready(function() { 
 
    $("input:checkbox").change(function() { 
 
     alert(); 
 
     if ($(this).prop("checked") == true) { 
 
      $(this).closest('tr').addClass("checked"); 
 
     } else $(this).closest('tr').removeClass("checked"); 
 
    }); 
 
});
.checked { 
 
    background-color:red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr id="row_0" role="row" class="odd"> 
 
     <td class="sorting_1"> 
 
      <input type="checkbox" /> 
 
     </td> 
 
     <td>Name</td> 
 
    </tr> 
 
</table>

Quelle

2016-12-18 10:28:03

0

Dies ist, wie Sie dies tun können,

1: die Kopfebene Postion wählen. 2: Suche auch td Wert für diese Position

var levelstatusPosition = ""; 
 

 
$("#SearchResultsTable th").each(function(k,v){ // find the header location of level column 
 
    
 
    
 
    if($(v).find("a")) 
 
    { 
 

 
    if($.trim($(this).text()) == "Level") 
 
    { 
 
     levelstatusPosition = k + 1; // 0 based 
 
    } 
 
    } 
 
    
 
    }); 
 

 

 
$('#SearchResultsTable tr td:nth-child('+levelstatusPosition+')').each(function(k,v){ 
 

 
    if($(v).text() == 3) 
 
    { 
 
    $(v).parent().css("background","red") 
 
    } 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%"> 
 
    <thead> 
 
    <tr class="sr-header"> 
 

 
      <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th> 
 
      <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th> 
 
      <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th> 
 
      <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th> 
 
      <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th> 
 
      <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th> 
 
      
 
      <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th> 
 
      <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th> 
 
      <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th> 
 
      <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th> 
 

 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 

 

 

 
        <tr class="sr-light-band"> 
 

 

 
       <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 

 
       
 

 

 

 

 

 
       <input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox"> 
 

 
       
 

 

 
       </td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="Case1" style="position:relative; overflow:hidden; height:100%"> 
 
    <div style="position:absolute; white-space:nowrap"> 
 
    <a title="Case1">Case1</a> 
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="Jussi" style="position:relative; overflow:hidden; height:100%"> 
 
    <div style="position:absolute; white-space:nowrap"> 
 
    
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">3</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
      </tr> 
 

 

 
        <tr class="sr-dark-band"> 
 

 

 
       <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 

 
       
 

 

 

 

 

 
       <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox"> 
 

 
       
 

 

 
       </td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="Case2" style="position:relative; overflow:hidden; height:100%"> 
 
    <div style="position:absolute; white-space:nowrap"> 
 
    <a title="Case2">Case2</a> 
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="" style="position:relative; overflow:hidden; height:100%"> 
 
    <div style="position:absolute; white-space:nowrap"> 
 
    <a href="" title=""></a> 
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">4</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
      </tr> 
 

 

 
        <tr class="sr-light-band"> 
 

 

 
       <td class="small bulk-hidden" <nobr="" valign="top" align="left"> 
 

 
       
 

 

 

 

 

 
       <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox"> 
 

 
       
 

 

 
       </td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="Case3"position:absolute; white-space:nowrap"> 
 
    <a title="Case3">Case3</a> 
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"> 
 

 

 
<div title="Jussi" style="position:relative; overflow:hidden; height:100%"> 
 
    <div style="position:absolute; white-space:nowrap"> 
 
    
 
    </div> 
 
    &nbsp; 
 
</div> 
 

 
</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">3</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left">Unassigned</td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="left"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
       <td class="small" <nobr="" valign="top" align="right"></td> 
 

 

 
      </tr> 
 

 

 
    </tbody> 
 
</table>

Quelle

2016-12-18 11:39:21 Deep

+0

Ihr Willkommen, denken Sie daran, dass die angenommene Antwort nur so lange gültig ist, bis Sie die Reihenfolge der Spalten nicht ändern. Wenn Sie dies ändern, müssen Sie die Position berechnen. In diesem Fall müssen Sie diese Lösung verwenden. – Deep

Verwandte Themen

 Verwandte Themen