Js Tabelle

nicosammito · 6 Juli 2018

HTML:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/1.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>Mitarbeiter</h2>

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

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Name</th>
    <th style="width:20%;">Tournummer</th>
    <th style="width:20%;">Pers. Nr.</th>
    <th style="width:20%;">Mobil</th>
    <th style="width:20%;">Arbeitsgebiet</th>
  </tr>
  <tr>
    <td>Sascha Schnabel</td>
    <td>1601</td>
    <td>2765030662</td>
    <td><a href="tel:015756816660">015756816660</a></a></td>
    <td>Hattingen</td>
  </tr>
  <tr>
      <td>Manfred Kail</td>
      <td>1600</td>
      <td>2765028012</td>
      <td><a href="tel:01717892470">01717892470</a></a></td>
      <td>Unternehmer</td>
  </tr>
  <tr>
    <td>Name3</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name3</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name4</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name5</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name6</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name7</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
</table>

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

</body>
</html>

Hallo, ich mal ne frage!
ich habe eine Suchfunktion mit einer Tabelle verknüpft und möchte nun durch die Suchfunktion Informationen aus der Tabelle bekommen.
Leider ließt er nur die erste Spalte aus.
Warum ließt er nicht alle Spalten aus?
Kann mir da jemand helfen?
Hier der Code:

scbawik · 6 Juli 2018

nicosammito schrieb:

HTML:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/1.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>Mitarbeiter</h2>

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

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Name</th>
    <th style="width:20%;">Tournummer</th>
    <th style="width:20%;">Pers. Nr.</th>
    <th style="width:20%;">Mobil</th>
    <th style="width:20%;">Arbeitsgebiet</th>
  </tr>
  <tr>
    <td>Sascha Schnabel</td>
    <td>1601</td>
    <td>2765030662</td>
    <td><a href="tel:015756816660">015756816660</a></a></td>
    <td>Hattingen</td>
  </tr>
  <tr>
      <td>Manfred Kail</td>
      <td>1600</td>
      <td>2765028012</td>
      <td><a href="tel:01717892470">01717892470</a></a></td>
      <td>Unternehmer</td>
  </tr>
  <tr>
    <td>Name3</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name3</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name4</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name5</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name6</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
  <tr>
    <td>Name7</td>
    <td><a href="tel:">123456789</a></td>
  </tr>
</table>

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

</body>
</html>

Hallo, ich mal ne frage!
ich habe eine Suchfunktion mit einer Tabelle verknüpft und möchte nun durch die Suchfunktion Informationen aus der Tabelle bekommen.
Leider ließt er nur die erste Spalte aus.
Warum ließt er nicht alle Spalten aus?
Kann mir da jemand helfen?
Hier der Code:

Du musst auch die Spalten durch eine Schleife jagen.
Hier wird nur die erste Zelle geprüft:

Code:

td = tr[i].getElementsByTagName("td")[0];

nicosammito · 6 Juli 2018

scbawik schrieb:
Du musst auch die Spalten durch eine Schleife jagen.
Hier wird nur die erste Zelle geprüft:

Code:

td = tr[i].getElementsByTagName("td")[0];

Kannst du mir mal den Code dazu schicken?

Aaron3219 · 6 Juli 2018

Ich schicke ihn dir auf jeden Fall nicht.

Javascript:

td = tr[i].getElementsByTagName("td")[=======>0<=====];

Da, du nimmst nur die erste Spalte zum suchen. Du musst die also in eine Schleife jagen, so wie die for-Schleife hier:

Javascript:

for (i = 0; i < tr.length; i++) {
}

und es nicht nur für Spalte 0, sondern für alle Spalten machen.

nicosammito · 6 Juli 2018

Aaron3219 schrieb:
Ich schicke ihn dir auf jeden Fall nicht.

Javascript:

td = tr[i].getElementsByTagName("td")[=======>0<=====];

Da, du nimmst nur die erste Spalte zum suchen. Du musst die also in eine Schleife jagen, so wie die for-Schleife hier:

Javascript:

for (i = 0; i < tr.length; i++) { }

und es nicht nur für Spalte 0, sondern für alle Spalten machen.

Also erstmal net so frech werden!!!
warum bist hier, wenn du nicht helfen willst????????????????

scbawik · 6 Juli 2018

nicosammito schrieb:
Also erstmal net so frech werden!!!

So wird dir niemand helfen.

nicosammito schrieb:
warum bist hier, wenn du nicht helfen willst????????????????

Dir beim Programmieren helfen gerne, aber deine Hausaufgaben machen - sicher nicht.

Aaron3219 · 6 Juli 2018

nicosammito schrieb:
Also erstmal net so frech werden!!!
warum bist hier, wenn du nicht helfen willst????????????????

Sorry, will ich jetzt wohl auch nicht mehr

.
Dann bin ich hier raus.

basti1012 · 6 Juli 2018

Weil es ja doch erklärt wurde. Man muß doch nur ne Scchleife reinsetzten.
Aber ich glaube das ist nicht das einzigste problem. Ich habe da mal gerade ein Pen gemacht mit der Schleife. Console log zeigt auch alles an wie und was er findet. Aber mit den ausblenden läuft irgendwas falsch.Ich glaube das man das ausblenden dann aus der 2 Schleife rausnehmen muß ,aber sicher bin ich mir da auch nichf.Funktionieren tut es bei mir auch nur halbwegs ohne jetzt alles zu endern

nicosammito · 6 Juli 2018

scbawik schrieb:
So wird dir niemand helfen.

Dir beim Programmieren helfen gerne, aber deine Hausaufgaben machen - sicher nicht.

Was meinst du mit Hausaufgaben?????
Das Programm brauchen wir für ein Unternehmen!

Sentence · 6 Juli 2018

Dann nimm https://datatables.net/

Js Tabelle

nicosammito

Neues Mitglied

scbawik

Senior HTML'ler

nicosammito

Neues Mitglied

Aaron3219

Senior HTML'ler

nicosammito

Neues Mitglied

scbawik

Senior HTML'ler

Aaron3219

Senior HTML'ler

basti1012

Senior HTML'ler

nicosammito

Neues Mitglied

Sentence

Aktives Mitglied

Neueste Beiträge