HTML Table Search with Dropdown list search javascript css

#JavaScript #dropdown #css
HTML Table Search with Dropdown search javascript css
Create an HTML table search using JavaScript and CSS. Implement a dropdown list for specific category filtering. JavaScript handles user input, filtering rows, and updating the table dynamically. CSS styles the table and dropdown. Ideal for organized data display and efficient data retrieval on web pages.
In this tutorial, we will demonstrate how to create a dynamic filtering feature for a student table using JavaScript and CSS. The goal is to allow users to filter the table based on the gender of the students. By following the steps outlined below, you can implement this functionality in your web application.
To begin, let's examine the provided HTML code. The table contains student data with columns for student name, gender, and age. The dropdown list with the id "gender" will serve as our filter. It has three options: "all," "Male," and "Female." The onchange event is set to trigger the JavaScript function "filterTable()" whenever the dropdown value is changed.
The JavaScript function "filterTable()" is responsible for filtering the table based on the selected gender. It retrieves the selected value from the dropdown list and obtains all the rows of the table. Using a loop, each row is checked for its gender value. If the selected value is "all" or matches the gender value of the row, the row is displayed; otherwise, it is hidden.
Now that we understand the code, let's see it in action. When you open the web page, you'll see the student table and the dropdown list. By selecting a gender option from the list, the table will dynamically update to display only the rows that match the selected gender. Choosing "all" will display all rows.
With this implementation, you can easily extend the functionality of your web application by adding more filtering options or customizing the design to suit your needs. Experimenting with different CSS styles and enhancing the JavaScript logic will allow you to create a more interactive and visually appealing user experience.
In conclusion, this tutorial has shown you how to implement a dynamic filtering feature for a student table using JavaScript and CSS. By utilizing the provided code and following the steps outlined, you can incorporate this functionality into your own web applications, providing users with an efficient way to filter and view specific data within a table.
Remember to stay tuned to my channel haritha computers and technology for more JavaScript and CSS tutorials to expand your web development skills and create even more impressive and interactive websites.

[@coelho57]

can you do it but with results coming from a database?

[@HarithaComputersTechnology]

yes ! you can but you need the programming language like asp.net c#, python etc.. you can find in my asp.net tutorials video search the records with dropdown from sql server or mysql database.. thansk

[@ehv5912]

WHAT IS WRONG WITH THIS CODE IT ISNT LOADING ON CHANGE.
table{
border-collapse: collapse;
text-align: center;
}
th,td{
padding: 8px;
border: 1px solid black;
}
thead{
background-color: chocolate;
color: aliceblue
}
#gender
{
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
border-radius: 15px;
font-size: large;
text-align: center;
}

Filter The Student Table With DropdownList
Using Javascript & CSS

Filter By Gender :

all
Male
Female





Student Name
Gender
Age




Charan
Male
32


James
Male
35


Lalitha
Female
30


Rani
Female
20


James
Male
34





function filterTable(){
var dropdown=document.getElementById("gender");
var selectedValue=dropdown.value;
var table=document.getElementById('student-table');
var rows=table.getElementsByTagName("tr");

for(var i=1;i

[@HarithaComputersTechnology]

The problem is you have closed javascript curly brackets , here is the code
The problem is in javascript () in script tag you have properly closed the curley brackets at the bottom lines check this is new code just copy and paste will work thanks.
Note: please like , share and subscribe my channel thanks
table{
border-collapse: collapse;
text-align: center;
}
th,td{
padding: 8px;
border: 1px solid black;
}
thead{
background-color: chocolate;
color: aliceblue
}
#gender
{
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
border-radius: 15px;
font-size: large;
text-align: center;
}
Filter The Student Table With DropdownList
Using Javascript & CSS
Filter By Gender :
all
Male
Female


Student Name
Gender
Age


Charan
Male
32

James
Male
35

Lalitha
Female
30

Rani
Female
20

James
Male
34


function filterTable(){
var dropdown=document.getElementById("gender");
var selectedValue=dropdown.value;
var table=document.getElementById('student-table');
var rows=table.getElementsByTagName("tr");
for(var i=1;i