How to implement a jQuery search for a table

November 06, 2024

#jQuery table search #table search tutorial #client-side search #filter table rows #HTML table search #dynamic table filtering #jQuery search input #filter table JavaScript

Step 1: Set Up HTML Structure with a Search Input and Sample Table

We’ll create a basic HTML page with a search input and a sample table containing random data, such as employee information.

jQuery Table Search Example

Employee Directory

Employee ID	Name	Department	Position	Location
101	Alice Johnson	Finance	Accountant	New York
102	Bob Smith	Engineering	Software Developer	San Francisco
103	Carol White	Human Resources	HR Manager	Chicago
104	David Brown	Marketing	Brand Strategist	Los Angeles
105	Eve Black	Sales	Sales Manager	Miami

Explanation of the Code

Search Input:

The input field with id="searchInput" is placed above the table, where users can type their search terms.
The jQuery function will listen to this input field and use its value to filter the table rows.

Sample Table:

The table is filled with sample data, representing an employee directory.
Each row in the <tbody> contains random data, including Employee ID, Name, Department, Position, and Location.

jQuery Search Script:

This script listens for the keyup event on the search input. As the user types, it captures the search term, converts it to lowercase, and checks if any table row contains the search term.
toggle(rowText.includes(searchTerm)): This line hides any rows that don’t include the search term and shows those that do.

How It Works

Type in the Search Box: When you type into the search box, the script checks each table row for the presence of the search term.
Filter Rows Dynamically: Rows that include the search term are shown, while rows that don’t are hidden. This filtering happens instantly without reloading the page.

Example Usage

Typing “Finance” will only show rows containing the “Finance” department.
Typing “Alice” will only display the row with the employee “Alice Johnson.”
Typing “Manager” will show any rows that include the term “Manager” in any column, such as HR Manager or Sales Manager.

This setup provides a simple, client-side search function for any table, allowing for quick and efficient data filtering with minimal setup.

Continue Reading

Discover more amazing content handpicked just for you

Tutorial

How to Translate URLs in React (2025 Guide)

Create pages/About.js:

import { useTranslation } from 'react-i18next';

export default function About() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('routes.about')}</h1>
    </div>
  );
}

May 04, 2025

Tutorial

Globalization in React (2025 Trends & Best Practices)

In 2025, users expect more than just language translation — they want your app to feel native to their region, culture, and behavior.

By implementing full globalization in your React application, you gain:

May 04, 2025

Tutorial

Implementing Internationalization (i18n) in a Large React Application (2025 Guide)

import React from 'react';
import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  const today = new Date();
  const price = 199.99;

  return (
    <div className="p-4">
      <h1>{t('welcome')}</h1>

      <div className="mt-4">
        <strong>{t('language')}:</strong>
        <button onClick={() => changeLanguage('en')} className="ml-2">EN</button>
        <button onClick={() => changeLanguage('fr')} className="ml-2">FR</button>
      </div>

      <p>{t('date_example', { date: today })}</p>
      <p>{t('price_example', { price })}</p>
    </div>
  );
};

export default Home;

Install i18next-format plugin (optional):

May 04, 2025

Tutorial

Building Micro-Frontends with Webpack Module Federation (2025 Guide)

Increased complexity
More testing needed (integration)
SEO handling is trickier in client-rendered apps

To improve Google indexing:

May 04, 2025

Tutorial

State Management Beyond Redux: Using Zustand for Scalable React Apps

However, for large-scale applications requiring complex state interactions, middleware, and extensive tooling, Redux might still be the preferred choice.

Zustand presents a compelling alternative to Redux for state management in React applications. Its minimalistic API, ease of use, and performance optimizations make it suitable for a wide range of projects, from simple applications to more complex systems.

May 03, 2025

Tutorial

Mastering React Rendering Performance with Memoization and Context

   const increment = useCallback(() => setCount(c => c + 1), []);

Implementing these practices ensures that only components dependent on specific context values re-render when those values change.([Medium][7])

May 03, 2025

Tutorial

javascript

Comparison and Logical Operators

Logical operators evaluate left to right; ensure your conditions are correct.

The user must be logged in (isLoggedIn is true).
The user's account must not be suspended (isSuspended is false).

Dec 11, 2024

Tutorial

javascript

Arithmetic Operators

    console.log(5 / 2); // 2.5

Modulus with Negative Numbers:
Be cautious, as the result can be negative.

Dec 11, 2024

Tutorial

javascript

Non-Primitive Data Types (Objects, Arrays, and Functions)

Primitives hold a single value and are immutable.
Non-primitives hold collections or behaviors and are mutable.

Example:

Dec 11, 2024

Tutorial

javascript

Primitive Data Types

  let bigNumber = 123456789012345678901234567890n;
  console.log(bigNumber);

Represents true or false.

Dec 11, 2024

Tutorial

javascript

Variables and Constants

Use const for constants or variables that should remain unchanged.
Example:

     const API_KEY = "12345";
     // API_KEY = "67890"; // Error: Assignment to constant variable

Dec 10, 2024

Tutorial

javascript

Hello World and Comments

     // This is a single-line comment
     console.log("Hello, World!"); // Outputting to the console

Enclosed within /<em> </em>/.
Example:

Dec 10, 2024

Tutorial

javascript

Using Node.js to Run JavaScript

     const _ = require('lodash');
     console.log(_.capitalize("hello world"));

Fast Execution: Powered by Google’s V8 engine.
Asynchronous and Event-Driven: Ideal for non-blocking applications.
Cross-Platform: Runs on Windows, macOS, and Linux.

Dec 10, 2024

Tutorial

javascript

Running JavaScript in the Browser Console

Write multi-line code directly in the console:

     function greet(name) {
       return `Hello, ${name}!`;
     }
     greet("Alice");

Dec 10, 2024

Tutorial

javascript

Installing a Code Editor (e.g., VS Code)

Customize the editor's look by choosing a theme:
Navigate to File > Preferences > Color Theme.
Popular themes: Dark+, Dracula, Monokai.

Go to File > Preferences > Settings and search for "Auto Save."
Set it to afterDelay for smoother development.

Dec 10, 2024

Tutorial

javascript

JavaScript in Modern Web Development

With Node.js, JavaScript powers the back-end to handle databases, APIs, and server logic.
Examples: REST APIs, real-time collaboration tools like Google Docs.

JavaScript isn't limited to the browser anymore. It's being used in diverse domains:

Dec 10, 2024

Tutorial

javascript

History and Evolution

No preview available for this content.

Dec 10, 2024

Tutorial

javascript css +1

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

manifest.json: Defines the extension's metadata and permissions.
background.js: Runs in the background to handle tweet automation logic.
content.js: Interacts with the X website.
popup.html: The user interface for starting/stopping the automation.
popup.js: Handles user interactions from the popup.

The manifest.json is the heart of the extension. It defines the extension's properties and permissions. Paste the following code into your manifest.json file:

Dec 10, 2024

Tutorial

javascript

Advanced State Management in React Using Redux Toolkit

Tools like Redux DevTools and best practices for debugging state.
How to avoid unnecessary renders.

Writing unit tests for slices and async thunks.
Mocking API calls and validating state changes.

Dec 09, 2024

Tutorial

php

Building a Laravel Application with Vue.js for Dynamic Interfaces

   import { createApp } from 'vue';
   import ExampleComponent from './components/ExampleComponent.vue';

   const app = createApp({});
   app.component('example-component', ExampleComponent);
   app.mount('#app');

Choose Your Plan

Programming & Frameworks

Web & Design

Data & Databases

DevOps, Tools & Misc

Electronics & Embedded Systems

How to implement a jQuery search for a table

Step 1: Set Up HTML Structure with a Search Input and Sample Table

Employee Directory

Explanation of the Code

How It Works

Example Usage

Continue Reading

How to Translate URLs in React (2025 Guide)

Globalization in React (2025 Trends & Best Practices)

Implementing Internationalization (i18n) in a Large React Application (2025 Guide)

Building Micro-Frontends with Webpack Module Federation (2025 Guide)

State Management Beyond Redux: Using Zustand for Scalable React Apps

Mastering React Rendering Performance with Memoization and Context

Comparison and Logical Operators

Arithmetic Operators

Non-Primitive Data Types (Objects, Arrays, and Functions)

Primitive Data Types

Variables and Constants

Hello World and Comments

Using Node.js to Run JavaScript

Running JavaScript in the Browser Console

Installing a Code Editor (e.g., VS Code)

JavaScript in Modern Web Development

History and Evolution

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

Advanced State Management in React Using Redux Toolkit

Building a Laravel Application with Vue.js for Dynamic Interfaces

Discussion 0

Choose Your Plan

Adblocker Detected

Programming & Frameworks

Web & Design

Data & Databases

DevOps, Tools & Misc

Electronics & Embedded Systems

How to implement a jQuery search for a table

Step 1: Set Up HTML Structure with a Search Input and Sample Table

Employee Directory

Explanation of the Code

How It Works

Example Usage

Continue Reading

Discussion 0