Frank Wisniewski

Posted on Jun 5, 2022

search through a table in one line of code

#javascript #html

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>

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

CID-FUNNY-LOGIN

Mayank Chawdhari - Dec 18 '24

Funny-Captcha Web

Mayank Chawdhari - Dec 18 '24

Deploying React Apps with Vite: The Complete Guide

FAB Builder | Code Generation - Dec 18 '24

High-Performance JavaScript Simplified: Web Workers, SharedArrayBuffer, and Atomics

Rigal Patel - Dec 18 '24

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

DEV Community