jQuery: HTML Inhalt einfärben
Web Entwicklung Dezember 30th, 2009Es kam die Frage auf, wie man bei einer Web Anwendung, bei der die Ausgabe vorgegeben ist, die Präsentation anpassen kann. Ohne eben die Web Anwendung ändern zu müssen.
Wenn man auf die Ausgabe gewissen Einfluss hat (z.B. über Templates), so kann man mit JavaScript und jQuery sehr einfach Anpassungen vornehmen – sogar aufgrund des HTML Inhalts. (In diesem Fall ging es um die optische Anpassung von Tabellen Zeilen, wenn es sich um premium Kunden handelt.)
Möchte man den Inhalt von HTML Elementen nutzen, so nutzt man einfach die jQuery Filter, die auch auf HTML content zugreifen können.
Beispiel:
jQuery("tr>td:contains(Prem)").addClass("highlight");
Hier wird nun auf Tabellenzellen, die „Prem“ als Inhalt haben, die CSS Klasse „highlight“ angewendet.
Ein vollständiges Beispiel incl. CSS:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content color</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.highlight { color: red; }
</style>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("tr>td:contains(Prem)").addClass("highlight");
});
</script>
<h1>Beispiel für jQuery</h1>
<table>
<tr>
<td width=40>Prem</td>
</td></tr></table>
</body>
</html>
Neue Kommentare