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)

Dynamically switch between translated URLs
Support SEO-friendly, localized routing
Scale to additional languages easily

Add 404 fallbacks for non-matching paths
Integrate i18next-http-backend to load translations from a CMS
Use language subdomains (e.g., fr.site.com) for region-specific experiences

May 04, 2025

Tutorial

Globalization in React (2025 Trends & Best Practices)

°C vs °F, km vs miles, 12h vs 24h clock.

Avoid idioms/slang in content

May 04, 2025

Tutorial

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

/locales
  /en
    home.json
    dashboard.json
  /fr
    home.json
    dashboard.json

Then load them like:

May 04, 2025

Tutorial

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

Each micro-frontend should be versioned and deployed separately.

Use shared in Module Federation to prevent loading duplicate libraries (like react, vue, etc.).

May 04, 2025

Tutorial

State Management Beyond Redux: Using Zustand for Scalable React Apps

You can persist state to localStorage or sessionStorage:

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }),
  {
    name: 'counter-storage',
  }
));

May 03, 2025

Tutorial

Mastering React Rendering Performance with Memoization and Context

This approach ensures that the expensive computation runs only when data changes, improving performance.

The Context API allows for sharing state across components without prop drilling. However, improper use can lead to performance issues, as any change in context value triggers re-renders in all consuming components.([Medium][6], [GeeksforGeeks][2])

May 03, 2025

Tutorial

javascript

Comparison and Logical Operators

Logical operators combine multiple conditions or values.

// AND operator
console.log(true && true); // true
console.log(true && false); // false

// OR operator
console.log(false || true); // true
console.log(false || false); // false

// NOT operator
console.log(!true); // false
console.log(!false); // true

Dec 11, 2024

Tutorial

javascript

Arithmetic Operators

     let remainder = 10 % 3; // 1

Raises the first operand to the power of the second operand.
Example:

Dec 11, 2024

Tutorial

javascript

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

Accessing Properties:
Dot notation:

    console.log(person.name); // "Alice"

Dec 11, 2024

Tutorial

javascript

Primitive Data Types

  let isLoggedIn = true;
  let hasAccess = false;
  console.log(isLoggedIn && hasAccess); // false

A variable that has been declared but not assigned a value is undefined.

Dec 11, 2024

Tutorial

javascript

Variables and Constants

In JavaScript, variables and constants are used to store data that your program can use and manipulate. This tutorial explains how to declare, initialize, and use variables and constants effectively.

Variables in JavaScript can be declared using three keywords: var, let, and const.

Dec 10, 2024

Tutorial

javascript

Hello World and Comments

Correct:

     console.log("Hello, World!";

Dec 10, 2024

Tutorial

javascript

Using Node.js to Run JavaScript

     > console.log("Hello, Node.js!");
     Hello, Node.js!

Create a new file named example.js and add the following code:

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)

Visit the official VS Code website.
Choose the version for your operating system (Windows, macOS, or Linux).

Follow the installation wizard for your operating system:
Windows: Double-click the .exe file and follow the on-screen instructions.
macOS: Drag the downloaded app into the Applications folder.
Linux: Use the package manager or install from the terminal.

Dec 10, 2024

Tutorial

javascript

JavaScript in Modern Web Development

Using AJAX or Fetch API, JavaScript retrieves and updates data without reloading the page.
Example: Infinite scrolling on social media feeds.

Frameworks and libraries like React, Angular, and Vue.js make it easier to build Single Page Applications (SPAs).
Examples: Gmail, Netflix, Trello.

Dec 10, 2024

Tutorial

javascript

History and Evolution

JavaScript is one of the core technologies of the web, alongside HTML and CSS. Here’s a brief overview of its history:

Created by Brendan Eich in just 10 days while working at Netscape.
Originally named Mocha, then renamed LiveScript, and finally JavaScript to ride the popularity wave of Java.

Dec 10, 2024

Tutorial

javascript css +1

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

const tweets = [
  "https://developerbreeze.com/post/59",
  "https://anotheramazingresource.com",
  "https://yetanothergreatsite.com",
];

const engage = [
  "Check this out! 🔥",
  "Learn something new today! 🚀",
  "This is a must-read! 📖",
];

Once you're satisfied with your extension, you can share it or publish it on the Chrome Web Store.

Dec 10, 2024

Tutorial

javascript

Advanced State Management in React Using Redux Toolkit

Dynamic reducer loading is an advanced pattern used in large-scale applications. It allows you to add reducers on the fly, optimizing the app's performance and avoiding loading unnecessary reducers upfront.

In src/app/store.js, enhance the store to support dynamic reducer injection:

Dec 09, 2024

Tutorial

php

Building a Laravel Application with Vue.js for Dynamic Interfaces

   composer create-project --prefer-dist laravel/laravel laravel-vue-app
   cd laravel-vue-app
   npm install

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