Macess  Hulk

Macess Hulk

1563242078

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

How we can add a search or filter option in an HTML Table using JavaScript? Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.

Previously I have shared a responsive table design, But how we can add a filter option in the table. Maybe you have seen on some websites, where you can search for a specific condition in the table. Like if ever you have visited any websites backend dashboard, then you probably know that we can be filtering out for any user by putting some conditions.

Today you will learn to create filter option for the HTML table using JavaScript. Using this program you can search for specific tables content by searching name, email, id, etc. This is a short & pure JavaScript program for table filter, you can use this on any kind of table on any place. You can use this on your next project, I know using jQuery we can create advanced filtering functions. But it is for showing how can we create the feature using pure JS.

So, Today I am sharing JavaScript Table Filter or Search for HTML Tables. Basically, This program is for Add FIlter In HTML & CSS Based Table. I have used Bootstrap for creating the table’s layout, & used CSS little bit for styling. In this table I have added some data, you add more according to your need. Or another option is to use the JS code & put it your own table.

If you are thinking now how this Filter Table actually is, Then see the preview given below.

Preview Of Add Filter In HTML CSS Tables

See this video preview to getting an idea of how this filter program looks like.


Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

  • JavaScript Portfolio Filter
  • Multi Step Form
  • Find Text & Highlight
  • Animated Newsletter Signup Form

JavaScript Table Filter or Search Source Code

Before sharing source code, let’s talk about this. As you know this is an HTML table, I have used Bootstrap & CSS to create the layout. This is a simple <td> and <tr> based table. In the filter fields, I have used HTML data-* (get info) attribute search & sorting them. In the CSS file, styled some elements like heading, table. As you can see in the preview the tables are colored in odd-even order, For creating that I used CSS :nth-of-type() property.

In the JavaScript section, I create a variable named var TableFilter and put all the functions inside it. In HTML we stored custom data using Data-* element, Now JS fetches it using .getAttribute method. Now javascript find the filtering text using a function called function _filter(row) If any data matches the input then its display that.

I know to explain the JS code in writing is taught, You will automatically understand after getting the codes. If you have some knowledge of JavaScript then you will definitely understand.

For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>Light Javascript Table Filter</title>
  
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  
  
</head>
 
<body>
 
  <section class="container">
 
	<h1>Table Filter JavaScript</h2>
 
	<input type="search" class="light-table-filter" data-table="table-info" placeholder="Filter/Search">
 
	<table class="table-info table">
		<thead>
		<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Phone No</th>
		<th>ID</th>
		</tr>
		</thead>
		<tbody>
		<tr>
		<td>John Doe</td>
		<td>john.doe@gmail.com</td>
		<td>0123456789</td>
		<td>01</td>
		</tr>
		<tr>
		<td>Alen Fox</td>
		<td>Alen.fox@gmail.com</td>
		<td>0155456789</td>
		<td>02</td>
		</tr>
		<tr>
		<td>Rakesh Sharma</td>
		<td>rakesh.sharma@gmail.com</td>
		<td>6754328901</td>
		<td>03</td>
		</tr>
		<tr>
		<td>Bunty Singh</td>
		<td>Bunty.singh@gmail.com</td>
		<td>5678241598</td>
		<td>04</td>
		</tr>
		<tr>
		<td>Sushant Rajput</td>
		<td>sushant.rajput@gmail.com</td>
		<td>675457801</td>
		<td>05</td>
		</tr>
		<tr>
		<td>Sunny Sharma</td>
		<td>sunnysharma@gmail.com</td>
		<td>675123451</td>
		<td>06</td>
		</tr>
		<tr>
		<td>Saurav Gupta</td>
		<td>saurav.gupta@gmail.com</td>
		<td>61234801</td>
		<td>07</td>
		</tr>
		<tr>
		<td>Appu Khote</td>
		<td>appu.khote@gmail.com</td>
		<td>67894561</td>
		<td>08</td>
		</tr>
		<tr>
		<td>Sandeep Arya</td>
		<td>sandeep.arya@gmail.com</td>
		<td>741852963</td>
		<td>09</td>
		</tr>
		<tr>
		<td>Vijay Mehra</td>
		<td>vijay.mehra@gmail.com</td>
		<td>456851982</td>
		<td>10</td>
		</tr>
		</tbody>
	</table>
 
</section>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
    margin-top: 150px;
    font-family: 'Lato', sans-serif;
}
input {
    width: 200px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #212121;
    height: 40px;
}
table {
    margin-top: 30px;
}
tr:nth-of-type(even) {
    background: #ffd98b;
}
thead {
    background: #fbb016;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
(function(document) {
	'use strict';
 
	var TableFilter = (function(Arr) {
 
		var _input;
 
		function _onInputEvent(e) {
		_input = e.target;
		var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
		Arr.forEach.call(tables, function(table) {
		Arr.forEach.call(table.tBodies, function(tbody) {
		Arr.forEach.call(tbody.rows, _filter);
		});
		});
		}
 
		function _filter(row) {
		var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
		row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}
 
		return {
		init: function() {
		var inputs = document.getElementsByClassName('light-table-filter');
		Arr.forEach.call(inputs, function(input) {
		input.oninput = _onInputEvent;
		});
		}
		};
	})(Array.prototype);
 
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
		TableFilter.init();
		}
	});
 
})(document);

That’s It. Now you have successfully created JavaScript Table Filter or Search. In other words, Add Filter In HTML CSS Table. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting. If you liked this post, share it with all of your programming buddies!

This post was originally published here

#html #html5 #css #css3 #javascript #tableau #web-development

What is GEEK

Buddha Community

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table
Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Macess  Hulk

Macess Hulk

1563242078

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

How we can add a search or filter option in an HTML Table using JavaScript? Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.

Previously I have shared a responsive table design, But how we can add a filter option in the table. Maybe you have seen on some websites, where you can search for a specific condition in the table. Like if ever you have visited any websites backend dashboard, then you probably know that we can be filtering out for any user by putting some conditions.

Today you will learn to create filter option for the HTML table using JavaScript. Using this program you can search for specific tables content by searching name, email, id, etc. This is a short & pure JavaScript program for table filter, you can use this on any kind of table on any place. You can use this on your next project, I know using jQuery we can create advanced filtering functions. But it is for showing how can we create the feature using pure JS.

So, Today I am sharing JavaScript Table Filter or Search for HTML Tables. Basically, This program is for Add FIlter In HTML & CSS Based Table. I have used Bootstrap for creating the table’s layout, & used CSS little bit for styling. In this table I have added some data, you add more according to your need. Or another option is to use the JS code & put it your own table.

If you are thinking now how this Filter Table actually is, Then see the preview given below.

Preview Of Add Filter In HTML CSS Tables

See this video preview to getting an idea of how this filter program looks like.


Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

  • JavaScript Portfolio Filter
  • Multi Step Form
  • Find Text & Highlight
  • Animated Newsletter Signup Form

JavaScript Table Filter or Search Source Code

Before sharing source code, let’s talk about this. As you know this is an HTML table, I have used Bootstrap & CSS to create the layout. This is a simple <td> and <tr> based table. In the filter fields, I have used HTML data-* (get info) attribute search & sorting them. In the CSS file, styled some elements like heading, table. As you can see in the preview the tables are colored in odd-even order, For creating that I used CSS :nth-of-type() property.

In the JavaScript section, I create a variable named var TableFilter and put all the functions inside it. In HTML we stored custom data using Data-* element, Now JS fetches it using .getAttribute method. Now javascript find the filtering text using a function called function _filter(row) If any data matches the input then its display that.

I know to explain the JS code in writing is taught, You will automatically understand after getting the codes. If you have some knowledge of JavaScript then you will definitely understand.

For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>Light Javascript Table Filter</title>
  
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  
  
</head>
 
<body>
 
  <section class="container">
 
	<h1>Table Filter JavaScript</h2>
 
	<input type="search" class="light-table-filter" data-table="table-info" placeholder="Filter/Search">
 
	<table class="table-info table">
		<thead>
		<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Phone No</th>
		<th>ID</th>
		</tr>
		</thead>
		<tbody>
		<tr>
		<td>John Doe</td>
		<td>john.doe@gmail.com</td>
		<td>0123456789</td>
		<td>01</td>
		</tr>
		<tr>
		<td>Alen Fox</td>
		<td>Alen.fox@gmail.com</td>
		<td>0155456789</td>
		<td>02</td>
		</tr>
		<tr>
		<td>Rakesh Sharma</td>
		<td>rakesh.sharma@gmail.com</td>
		<td>6754328901</td>
		<td>03</td>
		</tr>
		<tr>
		<td>Bunty Singh</td>
		<td>Bunty.singh@gmail.com</td>
		<td>5678241598</td>
		<td>04</td>
		</tr>
		<tr>
		<td>Sushant Rajput</td>
		<td>sushant.rajput@gmail.com</td>
		<td>675457801</td>
		<td>05</td>
		</tr>
		<tr>
		<td>Sunny Sharma</td>
		<td>sunnysharma@gmail.com</td>
		<td>675123451</td>
		<td>06</td>
		</tr>
		<tr>
		<td>Saurav Gupta</td>
		<td>saurav.gupta@gmail.com</td>
		<td>61234801</td>
		<td>07</td>
		</tr>
		<tr>
		<td>Appu Khote</td>
		<td>appu.khote@gmail.com</td>
		<td>67894561</td>
		<td>08</td>
		</tr>
		<tr>
		<td>Sandeep Arya</td>
		<td>sandeep.arya@gmail.com</td>
		<td>741852963</td>
		<td>09</td>
		</tr>
		<tr>
		<td>Vijay Mehra</td>
		<td>vijay.mehra@gmail.com</td>
		<td>456851982</td>
		<td>10</td>
		</tr>
		</tbody>
	</table>
 
</section>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
    margin-top: 150px;
    font-family: 'Lato', sans-serif;
}
input {
    width: 200px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #212121;
    height: 40px;
}
table {
    margin-top: 30px;
}
tr:nth-of-type(even) {
    background: #ffd98b;
}
thead {
    background: #fbb016;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
(function(document) {
	'use strict';
 
	var TableFilter = (function(Arr) {
 
		var _input;
 
		function _onInputEvent(e) {
		_input = e.target;
		var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
		Arr.forEach.call(tables, function(table) {
		Arr.forEach.call(table.tBodies, function(tbody) {
		Arr.forEach.call(tbody.rows, _filter);
		});
		});
		}
 
		function _filter(row) {
		var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
		row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}
 
		return {
		init: function() {
		var inputs = document.getElementsByClassName('light-table-filter');
		Arr.forEach.call(inputs, function(input) {
		input.oninput = _onInputEvent;
		});
		}
		};
	})(Array.prototype);
 
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
		TableFilter.init();
		}
	});
 
})(document);

That’s It. Now you have successfully created JavaScript Table Filter or Search. In other words, Add Filter In HTML CSS Table. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting. If you liked this post, share it with all of your programming buddies!

This post was originally published here

#html #html5 #css #css3 #javascript #tableau #web-development

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial 

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css