DEV Community

Cover image for search through a table in one line of code
Frank Wisniewski
Frank Wisniewski

Posted on

search through a table in one line of code

One Line of code

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <link rel=stylesheet 
    href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<body class=container>
  <h1>filter table</h1>
  <input type=search id=F>
  <table>
    <thead>
      <tr><td>City<td>Einwohner
      <tbody id=EW>
        <tr><td>Berlin<td>3748148
        <tr><td>Hamburg<td>1891810
        <tr><td>München<td>1471508
        <tr><td>Köln<td>1085664
        <tr><td>Frankfurt am Main<td>753056
        <tr><td>Stuttgart<td>634830
        <tr><td>Düsseldorf<td>619294
        <tr><td>Leipzig<td>587854
  </table>
    <script>
      F.onkeyup=e=>[...EW.rows].map(e => e.style
       .display=[...e.cells]
        .map(e => e.innerText)
        .join(';').match(RegExp(F.value,'i'))?'':'none');  
    </script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)