(JavaScript) HTML-Tabelle spalten Filtern

Guten Tag an alle,

da ihr mir in den vergangenen Wochen schon bei mehreren Problemen geholfen habt, dachte ich, ich versuche nochmal mein Glück.

Es geht um eine HTML-Tabelle, die mit Hilfe von Javascript gefiltert werden soll.
Ich bin jetzt schon so weit, dass ich eine Eingabe hab, diese auf den Index 1 (Spalte 2) greift (war vorerst die wichtigste Spalte).

Nun hat die Tabelle mehrere Table Header, was ja auch logisch ist.
Ich würde gerne mein Script soweit anpassen, dass ich auf die verschiedenen Table Header klicke, sich dann im Header die Suche/der Filter öffnet und ich in dieser Spalte filtern kann.

Ich hoffe ich habe das soweit verständlich erklärt.

Hier mein Ansatz:

 
<input type="text" id="inputsearch" onkeyup="myFunction()" placeholder="Suchen...">  


<h2>Tabellenüberschrift</h2>
<table id="TabellenID" class="DATATABLE">  
<tr>
<th width="5%">Spalte1</th><th width="8%">Spalte2</th><th width="10%">Spalte3</th><th width="5%">Spalte4</th><th width="5%">Spalte5</th><th width="22%">Spalte6</th>  
</tr>
<tr>
<td width="5%" style="background-color:">&nbsp;&nbsp;&nbsp;Hier steht etwas</td>  
<td width="8%" style="background-color:">Hier steht etwas</td>  
<td width="10%" style="background-color:">Hier steht etwas<br>  
</td><td width="5%" style="background-color:">Hier steht etwas<br>  
</td><td width="5%" style="background-color:">Hier steht etwas<br>  
</td><td width="22%" style="background-color:">und hier steht etwas<br>  

<ul type="circle"></ul>  
</td>
</tr>

<script>
function myFunction() {
  // Variablen Deklaration
  var input, filter, table, tr, td, th, i;
  input = document.getElementById("inputsearch");  
  filter = input.value.toUpperCase();
  table = document.getElementById("TabellenID");  
  tr = table.getElementsByTagName("tr");  

  // Schleife durch die Zeilen
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];    //Index der Tabellenspalten  
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";  
      } else {
        tr[i].style.display = "none";  
      }
    } 
  }
}
</script>

Wie gesagt, das Funktioniert soweit, nur leider lediglich in Spalte 2. Natürlich könnte ich dem Index mehr Spalten zuweisen, allerdings Sucht die Funktion dann in jeder Spalte gleichzeitig, was nicht der Sinn des ganzen ist.

Auf eure Hilfe freue ich mich.
MfG

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 368922

Url: https://administrator.de/contentid/368922

Ausgedruckt am: 26.11.2024 um 07:11 Uhr

5 Kommentare

Neuester Kommentar

Hi,
quick n' dirty example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Example</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
// filter action on current column
function FilterAction(){
	var fcolumn = parseInt($('#filter').attr('col')) + 1;
	// show all hidden
	$('#mytable tr:hidden').show();
	// hide rows not matching
	$('#mytable tr td:nth-child(' + fcolumn + ')').not(":contains('" + $('#searchfield').val() + "')").parent('tr').hide();
}

$(document).ready(function(e) {
	// set eventhandlers 
   $('#searchfield').keyup(function(e) {
       	FilterAction(e.newValue);
    });
	// search div leave handler
    $('#filter').mouseleave(function(e) {
        $('#filter').hide(200);
    });
	// header click handler
    $('#mytable th').click(function(e) {
		$('#mytable th').css('background-color','');
		$(this).css("background-color",'#F90');
		$('#filter').css("left",$(this).position().left).css("top",$(this).position().top).show(200).attr('col',$(this).index('th'));
    });
});
</script>
<style type="text/css">
body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

/* ###############  LIGHT DESIGN ############### */
table.light {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	border-left: 1px solid #ccc;
	color: #333;
	border-right: 1px solid  #ccc;
}
table.light tr th {
	text-transform: uppercase;
	text-align:left;
	border-top: 4px solid orange;
	border-bottom: 1px solid orange;
	background-color: #FFEDCA;
	cursor:pointer;
}
table.light tfoot tr th, table.light tfoot tr td {
	text-transform: uppercase;
	color: #000;
	font-weight: bold;
	border-bottom: 2px solid orange;
	background-color: #FFEDCA;
}
table.light td, table.light th {
	border-bottom: 1px solid orange;
	padding: 5px;
	line-height: 1.8em;
	vertical-align: top;
}
table.light tr:nth-child(even) td {background-color: #FFFCF4; }



</style>
<body>
<table id="mytable" width="500" border="0" cellspacing="0" cellpadding="2" class="light">
  <tr>
    <th scope="col">Data 1</th>
    <th scope="col">Data 2</th>
    <th scope="col">Data 3</th>
    <th scope="col">Data 4</th>
  </tr>
  <tr>
    <td>simplistic</td>
    <td>sweater</td>
    <td>desire</td>
    <td>sign</td>
  </tr>
  <tr>
    <td>string</td>
    <td>ten</td>
    <td>horrible</td>
    <td>watch</td>
  </tr>
  <tr>
    <td>bent</td>
    <td>hand</td>
    <td>nine</td>
    <td>rude</td>
  </tr>
  <tr>
    <td>head</td>
    <td>weigh</td>
    <td>decisive</td>
    <td>arch</td>
  </tr>
  <tr>
    <td>unequal</td>
    <td>laborer</td>
    <td>slip</td>
    <td>yawn</td>
  </tr>
  <tr>
    <td>itchy</td>
    <td>mom</td>
    <td>thoughtless</td>
    <td>hollow</td>
  </tr>
  <tr>
    <td>disgusted</td>
    <td>volatile</td>
    <td>green</td>
    <td>vague</td>
  </tr>
  <tr>
    <td>suck</td>
    <td>cry</td>
    <td>invite</td>
    <td>rat</td>
  </tr>
  <tr>
    <td>pathetic</td>
    <td>tawdry</td>
    <td>bump</td>
    <td>jar</td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="filter" style="width:150px; height:50px; background-color:#F90; position:absolute; padding:5px; display:none;box-shadow:2px 2px 1px">
	Suche:
	<input type="text" id="searchfield" style="width:140px" />
</div>
</body>
</html>

Gruß schnuffi

Hallo Schnuffi,

erstmal vielen Dank für deine Mühe und entschuldige, dass meine Antwort erst jetzt kommt.
Dein Code hat mich auf jeden Fall schon sehr weiter gebracht.

Folgendes Problem habe ich allerdings noch immer:

Die ganze HTML-Seite, bzw. das Layout ist als Tabelle angelegt. D.h. die Tabelle, die ich filtern möchte, steckt in einer weiteren Tabelle (in nenne sie einfach mal Mastertabelle).
Sobald eine Tabelle in einer anderen verschachtelt ist, funktioniert das Script leider nicht mehr.

Ich habe bereits vergeblich versucht, die Tabelle in der Mastertabelle in einen Container zu packen.

Hast du hier noch eine Idee?

Danke und Gruß

Einfach die ID passend setzen

Das habe ich bereits gemacht.
Sobald ich die Tabelle ohne Mastertabelle verwende funktioniert auch alles wunderbar.

Ist die Mastertabelle allerdings vorhanden (was automatisch der Fall ist, da die Seite generiert wird) funktioniert die Suche nicht mehr.

Das Suchfeld erscheint, doch sobald man etwas suchen möchte, wird einfach nichts weiter gemacht.