Html tabelle suchen in ALLEN spalten

Hi!

Ich brauche eine Tabelle nach dem folgenden Schema:

Nur das ich gerne über alle 4 Spalten (gleichzeitig, kompletter Inhalt) suchen möchte:

Also 1 findet alle 4 Treffer, 2 auch usw.

Bei meinem Schema kann ich immer nur eine Spalte zum Suchen definieren.

Vielen Dank für eure Hilfe!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

{

box-sizing: border-box;
}

#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}

#myTable th, #myTable td {
text-align: left;
padding: 12px;
}

#myTable tr {
border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
<tr class="header">
<th style="width:25%;">1</th>
<th style="width:25%;">2</th>
<th style="width:25%;">3</th>
<th style="width:25%;">4</th>
</tr>
<tr>
<td>Alfreds Futterkiste1</td>
<td>Germany2</td>
<td>Island Trading3</td>
<td>UK4</td>
</tr>
<tr>
<td>Koniglich Essen2</td>
<td>Germany3</td>
<td>Laughing Bacchus Winecellars4</td>
<td>Canada1</td>
</tr>
<tr>
<td>Island Trading3</td>
<td>UK4</td>
<td>North/South1</td>
<td>UK2</td>
</tr>
<tr>
<td>Koniglich Essen4</td>
<td>Germany1</td>
<td>Magazzini Alimentari Riuniti2</td>
<td>Italy3</td>
</tr>
<tr>
</table>

<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
if (td) {

if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

</body>
</html>

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

Content-ID: 398902

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

Ausgedruckt am: 22.11.2024 um 15:11 Uhr

4 Kommentare

Neuester Kommentar

Moin,

kansnt du deinen Code evtl. in Code-Tags setzen? So ist das kaum lesbar.

lg,
Slainte

Hallo ad.min

Dafür gibt es ein simples und funktionierendes Snippet (basierend auf jquery) auf codepen:
https://codepen.io/adobewordpress/pen/gbewLV

Das kannst Du Dir ja dann einfach anpassen.

Gruß

Hi cnelke!

Danke für den Link. Nur wenn ich in der Lage wäre Code anzupassen, würde ich hier nicht um Hilfe bitten.

Also wer von euch kann mir diesen Code so anpassen, das man über alle 4 Spalten bzw. den gesamten Inhalt suchen kann?

function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");  
filter = input.value.toUpperCase();
table = document.getElementById("myTable");  
tr = table.getElementsByTagName("tr");  
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");  
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";  
} else {
tr[i].style.display = "none";  
}
} 
}
}

Wenn man statt td = tr[i].getElementsByTagName("td");

td = tr[i].getElementsByTagName("td")[1];
oder
td = tr[i].getElementsByTagName("td")[2];
oder
td = tr[i].getElementsByTagName("td")[3];
nimmt,
werden die Einträge in Spalte 1,2,3 ODER 4 gefunden.

Nur wie sucht man in allen 4 gleichzeitig?

Danke

Hi SlainteMhath!

Ich habe dir den SCRIPT Block noch mal als CODE Block gesondert dargestellt. So besser?

Servus,
ohne jQuery Framework (plain javascript):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<style>
#myInput {
	background-image: url('/css/searchicon.png');  
	background-position: 10px 10px;
	background-repeat: no-repeat;
	width: 100%;
	font-size: 16px;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
}
#myTable {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
	font-size: 18px;
}
#myTable th, #myTable td {
	text-align: left;
	padding: 12px;
}
#myTable tr { border-bottom: 1px solid #ddd; }
#myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">  
<table id="myTable">  
  <tr class="header">  
    <th style="width:25%;">1</th>  
    <th style="width:25%;">2</th>  
    <th style="width:25%;">3</th>  
    <th style="width:25%;">4</th>  
  </tr>
  <tr>
    <td>Alfreds Futterkiste1</td>
    <td>Germany2</td>
    <td>Island Trading3</td>
    <td>UK4</td>
  </tr>
  <tr>
    <td>Koniglich Essen2</td>
    <td>Germany3</td>
    <td>Laughing Bacchus Winecellars4</td>
    <td>Canada1</td>
  </tr>
  <tr>
    <td>Island Trading3</td>
    <td>UK4</td>
    <td>North/South1</td>
    <td>UK2</td>
  </tr>
  <tr>
    <td>Koniglich Essen4</td>
    <td>Germany1</td>
    <td>Magazzini Alimentari Riuniti2</td>
    <td>Italy3</td>
  </tr>
  <tr>
</table>
<script>
function myFunction(input){
	var tbl = document.getElementById('myTable');  
	var rows = tbl.getElementsByTagName('tr');  
	for (i=1;i < rows.length;i++){
		if (rows[i].innerText.toLowerCase().indexOf(input.value.toLowerCase()) == -1){
			rows[i].style.display = "none";  
		}else{
			rows[i].style.display = "table-row";  
		}
	}
}
</script>
</body>
</html>

oder als Alternative mit Nutzung des jQuery-Frameworks:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<style>
#myInput {
	background-image: url('/css/searchicon.png');  
	background-position: 10px 10px;
	background-repeat: no-repeat;
	width: 100%;
	font-size: 16px;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
}
#myTable {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
	font-size: 18px;
}
#myTable th, #myTable td {
	text-align: left;
	padding: 12px;
}
#myTable tr { border-bottom: 1px solid #ddd; }
#myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">  
<table id="myTable">  
  <tr class="header">  
    <th style="width:25%;">1</th>  
    <th style="width:25%;">2</th>  
    <th style="width:25%;">3</th>  
    <th style="width:25%;">4</th>  
  </tr>
  <tr>
    <td>Alfreds Futterkiste1</td>
    <td>Germany2</td>
    <td>Island Trading3</td>
    <td>UK4</td>
  </tr>
  <tr>
    <td>Koniglich Essen2</td>
    <td>Germany3</td>
    <td>Laughing Bacchus Winecellars4</td>
    <td>Canada1</td>
  </tr>
  <tr>
    <td>Island Trading3</td>
    <td>UK4</td>
    <td>North/South1</td>
    <td>UK2</td>
  </tr>
  <tr>
    <td>Koniglich Essen4</td>
    <td>Germany1</td>
    <td>Magazzini Alimentari Riuniti2</td>
    <td>Italy3</td>
  </tr>
  <tr>
</table>
<script>
function myFunction(input) {
	$('#myTable tr:hidden').show();  
	$('#myTable tr:not(.header)').filter(function() {  
        return $(this).text().toLowerCase().indexOf(input.value.toLowerCase()) == -1
    }).hide();
}
</script>
</body>
</html>

Grüße Uwe