Hi Team,
I have bind HTML table with array data using Javascript.
Bind dropdown to select filter options.
Radio button for filter options.
Table contains students data like Sr No, Name, English, Maths, Science, Social Science
Where select dropdown contains the Subject name (English, Maths, Science, Social Science).
Radio Buttons - above, below, between
Textbox for Filter - input type for filter value
Operation - user will select Subject name from select dropdown- then click on any of the radio button (above, below, between) and then enter value in textbox --> click on Filter button then table should show the filtered data.
below is the code i have tried.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#StudentTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#StudentTable th, #StudentTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#StudentTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#StudentTable tr.header, #StudentTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
</style>
<script>
function onPageLoad() {
}
function filterBy() {
// TO get the column index
var e = document.getElementById("subjects");
var value = e.options[e.selectedIndex].value;
}
function clear() {
debugger;
document.getElementById("mark").value = '';
}
function filterClick() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("mark");
filter = input.value.toUpperCase();
table = document.getElementById("StudentTable");
tr = table.getElementsByTagName("tr");
debugger;
// TO get the column index
var e = document.getElementById("subjects");
var value = e.options[e.selectedIndex].value;
var colValue;
if (value = 'English') {
colValue = 2;
}
else if (value = 'Maths') {
colValue = 3;
}
else if (value = 'Science') {
colValue = 4;
}
else if (value = 'Social Science') {
colValue = 5;
}
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
debugger;
td = tr[i].getElementsByTagName("td")[colValue];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</head>
<body>
Subject : <select id="subjects">
<!--onchange="filterBy()-->
<option id="ops0" value="" selected="selected">--Select Subject--</option>
<option id="ops1" value="English">English</option>
<option id="ops2" value="Maths">Maths</option>
<option id="ops3" value="Science">Science</option>
<option id="ops4" value="Social Science">Social Science</option>
<!--<option value="2" selected="selected">English</option>
<option value="3">Maths</option>
<option value="4">Science</option>
<option value="5">Social Science</option>-->
</select>
Filter by - :
<input type="radio" id="above" name="mode" value="above">
<label for="Above">Above</label>
<input type="radio" id="below" name="mode" value="below">
<label for="female">Below</label>
<input type="radio" id="between" name="mode" value="between">
<label for="other">Between</label>
<!--<input type="text" id="myInput" placeholder="Search..">--> <!--onkeyup="myFunction()"-->
<input type="number" id="mark">
<input type="button" value="Filter" onclick="filterClick()">
<input type="button" value="Clear" onclick="clear()">
<table id="StudentTable">
<tr class="header">
<th style="width:10%;">Sr No</th>
<th style="width:20%;">Name</th>
<th style="width:20%;">English</th>
<th style="width:20%;">Maths</th>
<th style="width:20%;">Science</th>
<th style="width:20%;">Social Science</th>
</tr>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>60</td>
<td>50</td>
<td>80</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Ravi Waghmare</td>
<td>30</td>
<td>40</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>Bhaga M</td>
<td>86</td>
<td>67</td>
<td>97</td>
<td>60</td>
</tr>
</table>
</body>
</html>
