{"id":91,"date":"2008-03-26T13:54:20","date_gmt":"2008-03-26T11:54:20","guid":{"rendered":"http:\/\/www.hermione.de\/blog\/?p=91"},"modified":"2008-04-24T16:05:09","modified_gmt":"2008-04-24T14:05:09","slug":"table-striping-jquery","status":"publish","type":"post","link":"http:\/\/blog.hermione.de\/?p=91","title":{"rendered":"Zweifarbige Tabelle mit Filter [jquery]"},"content":{"rendered":"<h4>Gestreifte Tabelle mit Filter Funktion<\/h4>\n<p><input size=\"20\" maxlength=\"20\" id=\"zebraFilter\" type=\"text\" \/><\/p>\n<table class=\"zebra\">\n<tr class=\"ttshow\">\n<th>eins<\/th>\n<th>zwei<\/th>\n<th>drei<\/th>\n<th>vier<\/th>\n<\/tr>\n<tr>\n<td>januar<\/td>\n<td>abc<\/td>\n<td>katze<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>maerz<\/td>\n<td>abc<\/td>\n<td>lief<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>oktober<\/td>\n<td>abc<\/td>\n<td>im<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>oktober<\/td>\n<td>abc<\/td>\n<td>schnee<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>maerz<\/td>\n<td>abc<\/td>\n<td>katze<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>oktober<\/td>\n<td>abc<\/td>\n<td>lief<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>oktober<\/td>\n<td>abc<\/td>\n<td>im<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>januar<\/td>\n<td>abc<\/td>\n<td>schnee<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>maerz<\/td>\n<td>abc<\/td>\n<td>katze lief im schnee<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>oktober<\/td>\n<td>abc<\/td>\n<td>Katze lief im Schnee<\/td>\n<td>abc<\/td>\n<\/tr>\n<tr>\n<td>maerz<\/td>\n<td>abc<\/td>\n<td>katze schlief im schnee<\/td>\n<td>abc<\/td>\n<\/tr>\n<\/table>\n<p><!--more--><\/p>\n<h4>javascript teil<\/h4>\n<table class=\"rosa\">\n<tr>\n<td>\n<pre><code>&lt;script type=\"text\/javascript\" src=jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n\r\n      <strong>\/\/ over function color changes<\/strong>\r\n      $(\".tablestripe tr\").mouseover(function() {\r\n         $(this).addClass(\"over\");\r\n      })\r\n      .mouseout(function() {\r\n         $(this).removeClass(\"over\");\r\n      });\r\n\r\n      <strong>\/\/ zebra striped table<\/strong>\r\n      $(\".tablestripe tr:even\").addClass(\"second\");\r\n\r\n      <strong>\/\/ input field changes<\/strong>\r\n       $(\"#zebraFilter\").bind(\"keyup\", function() {\r\n\r\n         filterTxt = $(this).val();\r\n         $(\"#zebraFilter\").attr({value: filterTxt});\r\n\r\n         <strong>\/\/ filter <\/strong>\r\n         $(\".zebra tr\").hide();\r\n         $(\".zebra tr.ttshow\").show();\r\n         $(\".zebra tr\").filter(\":contains(\" + filterTxt + \")\").show();\r\n\r\n         <strong>\/\/ striped table for filter results<\/strong>\r\n         $(\".zebra tr\").removeClass(\"second\");\r\n         $(\".zebra tr\").filter(\":contains(\" + filterTxt + \"):even\").addClass(\"second\");\r\n\r\n     });\r\n\r\n});\r\n&lt;\/script&gt;<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<h4>css teil<\/h4>\n<table class=\"rosa\">\n<tr>\n<td>\n<pre><code>&lt;style type=\"text\/css\"&gt;\r\ntable {\r\n   border-collapse: collapse;\r\n   width: 400px;\r\n   margin: 20px;\r\n   font-size: .9em;\r\n}\r\n\r\nth {\r\n   background: #423;\r\n   color: #fff;\r\n   font-weight: bold;\r\n   padding: 5px 10px;\r\n   text-align: left;\r\n}\r\n\r\ntd {\r\n   padding: 5px 10px;\r\n   border-bottom: 1px solid #a00;\r\n}\r\n\r\ntr.second td {\r\n   background: #ecd;\r\n}\r\n\r\ntr.over td {\r\n   background: #cab;\r\n}\r\n&lt;\/style&gt;<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<h4>links<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.hermione.de\/gf\/table-striping.html\">die Tabelle (Quellcode siehe hier)<\/a><\/li>\n<li><a href=\"http:\/\/15daysofjquery.com\/examples\/zebra\/\">zebra striping made easy with jquery<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Gestreifte Tabelle mit Filter Funktion eins zwei drei vier januar abc katze abc maerz abc lief abc oktober abc im abc oktober abc schnee abc maerz abc katze abc oktober abc lief abc oktober abc im abc januar abc schnee abc maerz abc katze lief im schnee abc oktober abc Katze lief im Schnee abc [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/91"}],"collection":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=91"}],"version-history":[{"count":0,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}