ad.min
Goto Top

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>

Content-Key: 398902

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

Ausgedruckt am: 19.03.2024 um 09:03 Uhr

Mitglied: SlainteMhath
SlainteMhath 21.01.2019 um 08:29:09 Uhr
Goto Top
Moin,

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

lg,
Slainte
Mitglied: cnelke
cnelke 21.01.2019 um 09:24:40 Uhr
Goto Top
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ß
Mitglied: ad.min
ad.min 21.01.2019 um 09:44:25 Uhr
Goto Top
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?
Mitglied: colinardo
Lösung colinardo 21.01.2019 aktualisiert um 12:07:05 Uhr
Goto Top
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