Filtering html table using jQuery - javascript

I have an HTML table like this:
<table id="tableRegister" border="1">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</table>
I want to filter it based on three columns Age Class and Term.
So the distinct values of the columns are inside three select boxes:
<select class="age" data-attribute="age" >
<option value="all">Select age</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="30">30</option>
<option value="32">32</option>
</select>
<select class="class" data-attribute="class">
<option value="all">Select Class </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When the default option is selected in all of them I want to display all.
To make it easier during the table rendering I put three attributes in each row that contains the value of each of these three fields that are filterable for the current row: data-age="", data-class="" and data-term="".
So I want to be able to filer based on these, but I'm having a problem whether the options are reselected because it happens it hide all the rows.
Can someone help me cause I'm stuck on this? Here's the [JS FIDDLE][1]
$(".age").on("change",function(){
ageVal = $(this).val();
updateTable(ageVal,'age');
});
$(".class").on("change",function(){
classVal = $(this).val();
updateTable(classVal,'class');
});
$(".term").on("change",function(){
termVal = $(this).val();
updateTable(termVal, 'term');
});
var tableRows = $('#tableRegister').find('.filter-row');
function updateTable(selectVal, attribute){
if(selectVal === 'all'){
// show all
$('.filter-row').show();
}else{
tableRows.each(function(){
var rowAttValue = $(this).attr("data-"+attribute);
if(selectVal === rowAttValue){
$(this).addClass('show');
$(this).show();
}else{
$(this).addClass('hide');
$(this).hide();
}
});
}
}


The problem is that you are relying in equality to show the row and you're not considering the other filters.
I've rewrite your code to process all the filters and hide the row when one of the filters is different from the cell value.
This code can also be optimized.
Please find my JSFiddle here
Javascript:
$('.filtert').hide();
var $tableRows = $('#tableRegister .filter-row');
$(".columnfilter").on("change", function() {
// Builds the filters for all the columns:
var filters = [];
$(".columnfilter").each(function() {
var $that = $(this);
var value = $that.val();
if (value != 'all') {
filters.push({
at: $that.data('attribute'),
val: value
});
}
});
var filtersLength = filters.length;
if (filtersLength == 0) {
$('.filtert').hide();
$tableRows.show();
} else {
$('.filtert').show();
// Apply filters:
$tableRows.each(function() {
var $that = $(this);
var showRow = true;
for (var i = 0; i < filtersLength; i++) {
var filter = filters[i];
var rowAttValue = $(this).data(filter.at);
if (rowAttValue != filter.val) {
showRow = false;
break;
}
}
$that.toggle(showRow);
});
}
});


you can use :containts to search text(). then you no need all your data-attribute anymore
$(function(){
$(".age, .class, .term").change(function(){
search();
});
function search(){
let ageVal = $('.age').val(),
classVal = $('.class').val(),
termVal = $('.term').val();
$('.filter-row').show(); //reset
if(ageVal !='all')
$('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();
if(classVal !='all')
$('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();
if(termVal !='all')
$('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
}
});
<p class="filtert">
Filtering
</p>
<select class="age" data-attribute="age" >
<option value="all">Select age</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="30">30</option>
<option value="32">32</option>
</select>
<select class="class" data-attribute="class">
<option value="all">Select Class </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="term" data-attribute="term">
<option value="all"> Select </option>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
</select>
<br>
<table id="tableRegister" border="1">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
<tr class="filter-row " data-age="11" data-class="2" data-term="Day">
<td>Raja Ram.S</td>
<td>11</td>
<td>Football</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row " data-age="32" data-class="3" data-term="Month">
<td>Priya</td>
<td>32</td>
<td>Cricket</td>
<td>3</td>
<td>Month</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".age, .class, .term").change(function(){
search();
});
function search(){
let ageVal = $('.age').val(),
classVal = $('.class').val(),
termVal = $('.term').val();
$('.filter-row').show(); //reset
if(ageVal !='all')
$('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();
if(classVal !='all')
$('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();
if(termVal !='all')
$('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
}
})
</script>

Related

Find the closest number in a table to a specific number

I have a table of numbers that I want to find the closest number to a particular number and change its color.
Friends, how can this be done?
function Cf(){
$("td").each(function () {
let v=$("#s1").val()
if(this.innerHTML<v){
this.style.color="red"
}else{
this.style.color="black"
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>100</td>
<td>70</td>
<td>30</td>
<td>50</td>
<td>10</td>
<td>50</td>
<td>90</td>
<td>20</td>
<td>40</td>
</tr>
</table>
<select id="s1" onchange="Cf()">
<option value="83">83</option>
<option value="23">23</option>
<option value="73">73</option>
<option value="63">63</option>
<option value="53">53</option>
</select>

function Cf() {
let innerhtml = [];
$("td").each(function () {
innerhtml.push(this.innerHTML)
});
const needle = $("#s1").val();
const closest = innerhtml.reduce((a, b) => {
return Math.abs(b - needle) < Math.abs(a - needle) ? b : a;
});
$("td").each(function () {
if (this.innerHTML === closest) {
this.style.color = "red"
} else {
this.style.color = "blue"
}
});
console.log(closest)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>100</td>
<td>70</td>
<td>30</td>
<td>50</td>
<td>10</td>
<td>50</td>
<td>90</td>
<td>20</td>
<td>40</td>
</tr>
</table>
<select id="s1" onchange="Cf()">
<option value="83">83</option>
<option value="23">23</option>
<option value="73">73</option>
<option value="63">63</option>
<option value="53">53</option>
</select>

How to filter data from options for special column jQuery

I work with the filtering data in the table, and i create script for filtering data.
But problem is that script filtering data in all table, but i need to filter data only in special rows.
Because i some row i can have same values, and filter will not work properly.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate)
applyFilter(duetDate)
applyFilter(templateName)
applyFilter(status)
}
function applyFilter(value) {
if (value)
filters.push(':contains(' + value + ')')
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
var currentFilter = null;
filters.forEach(filter => {
if (currentFilter === null) {
currentFilter = rows.filter(filter)
} else {
currentFilter = currentFilter.filter(filter)
}
})
currentFilter.show()
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S30</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S 30</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>
So if i will filter for value 30, which i need to find in row 2, it's will find all values in the table, but i need in just this row.

You need to know which filter corresponds to which column
To do this, give each of your columns a class/id and pass it to your applyFilter function.
Then search for filter value in that particular column and decide whether that row needs to be shown or not.
i.e. if the user wants to filter by age, search the age column in the table and show all rows that match the filtered age.
Check out the modified code below.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate,1)
applyFilter(duetDate,2)
applyFilter(templateName,1)
applyFilter(status,2)
}
function applyFilter(value,id) {
if (value)
filters.push('.col'+id+':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
filters.forEach(filter => {
$("#shelulerData td"+filter).parent().show();
})
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td class="col1">Thulasiram.S30</td>
<td class="col2">11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td class="col1">ST Ram</td>
<td class="col2">11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td class="col1">Ram Kumar.S 30</td>
<td class="col2">21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td class="col1">Dinesh Kumar.S</td>
<td class="col2">30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>

multiple select filter in javasvript

i am using to multiple select filter, i am trying multi select and filter in my table, but i have an problem, if i select only one value data are filter and show in my table but when i select multiple values data are not filter and show.
function filterText() {
var rex = new RegExp($('#filterText').val());
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='1'>Lower Case</option>
<option value='2'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>
I just want if i select Lowercase(value=1) and Uppercase(value=2) show both table.
Thanks.

Here is a fixed code.
$('#filterText').val() returns an array .join('|') makes the regex search either of the text available
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='Lower Case'>Lower Case</option>
<option value='Upper Case'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>

Get data from specific columns in table when row checked

I need to get from specific table columns in a row. All data should be pushed into an array.
I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value.
I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
Function displays only data from one column. If I add .'td:eg(6)' I got empty array

#Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
And before implementing it to your code you can play it in here at JS Fiddle Demo.
In fiddle demo open console [F12] you can see your list of selected row value in an array.
Hope this is what you are looking for.

Here i try your result to get select row dropdwun value.
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>

How to focus on a specific day on a calender with Javascript

I recently made my own calendar using html and CSS, now I want the calendar to have the possibility to choose a day and month from the dropdown list, so when I choose a date it will focus on the day and change its color
I have done some coding with Javascript but problem is it takes to much lines in Javascript, anyone knows an easier way?
JS Code:
function selectDay() {
var day = document.getElementById("day");
var month = document.getElementById("month");
var type = document.getElementById("type");
var selectedValueday = day.options[day.selectedIndex].value;
var selectedValuemonth = month.options[month.selectedIndex].value;
var selectedValuetype = type.options[type.selectedIndex].value;
if ((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "01")) {
document.getElementById('jan1').style.backgroundColor = 'purple';
} else if((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "02")){
document.getElementById('jan1').style.backgroundColor = 'yellow';
}else{
document.getElementById('jan1').style.backgroundColor = 'white';
}
if ((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "01")) {
document.getElementById('jan2').style.backgroundColor = 'purple';
} else if((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "02")){
document.getElementById('jan2').style.backgroundColor = 'yellow';
}else{
document.getElementById('jan2').style.backgroundColor = 'white';
}
}
HTML Code:
<select id="day">
<option>Kies een dag</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="month">
<option>Kies een maand</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="type">
<option>Kies een type</option>
<option value="01">Feestdag</option>
<option value="02">Verjaardag</option>
</select>
<button onclick="selectDay();">Zoek</button>
<h1 align='center'>Jaarkalender 2013</h1>
<table align='center' width = '1600' border = '0'>
<tr>
<td ALIGN="center"><B>Januari</B>
<table height = '175' border = '0'>
<tr>
<TD bgcolor='B9B1B1'><b><b>Maandag</b></b><FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
</tr>
<TR>
<TD><font color="#888888">30</font></TD>
<TD id="jan1" title = 'Nieuwjaar'><font color = '#FF0000'><B>1</B></TD>
<TD id="jan2">2</TD>
<TD>3</TD>
<TD>4</TD>
<TD bgcolor='#00FFFF'>5</TD>
<TD bgcolor='#00FFFF'>6</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD bgcolor='#00FFFF'>12</TD>
<TD bgcolor='#00FFFF'>13</TD>
</TR>
<TR>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD bgcolor='#00FFFF'>19</TD>
<TD bgcolor='#00FFFF'>20</TD>
</TR>
<TR>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
<TD>24</TD>
<TD>25</TD>
<TD bgcolor='#00FFFF'>26</TD>
<TD bgcolor='#00FFFF'>27</TD>
</TR>
<TR>
<TD>28</TD>
<TD>29</TD>
<TD>30</TD>
<TD>31</TD>
<TD><font color="#888888">1</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">2</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">3</font></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD bgcolor='#00FFFF'></TD>
<TD bgcolor='#00FFFF'></TD>
</TR>
</table>
</TD>
<td ALIGN="center"><B>Februari</B>
<table border = '0' height = '175'>
<tr>
<TD bgcolor='B9B1B1'><b><b>Maandag</b></b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
</tr>
<TR>
<TD><font color="#888888">28</font></TD>
<TD><font color="#888888">29</font></TD>
<TD><font color="#888888">30</font></TD>
<TD><font color="#888888">31</font></TD>
<TD>1</TD>
<TD bgcolor='#00FFFF'>2</TD>
<TD bgcolor='#00FFFF'>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD bgcolor='#00FFFF'>9</TD>
<TD bgcolor='#00FFFF'>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD bgcolor='#00FFFF'>16</TD>
<TD bgcolor='#00FFFF'>17</TD>
</TR>
<TR>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
<TD>21</TD>
<TD>22</TD>
<TD bgcolor='#00FFFF'>23</TD>
<TD bgcolor='#00FFFF'>24</TD>
</TR>
<TR>
<TD>25</TD>
<TD>26</TD>
<TD>27</TD>
<TD>28</TD>
<TD><font color="#888888">1</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">2</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">3</font></TD>
</TR>
</table>
</TD>
</table>
CSS Code:
table{
left: -200px;
border-collapse:collapse;
border:1px solid black;
}

Give each of the table cells (the ones representing dates only) an individual id - they cant start with a number so I suggest use m then the month number d then the day number - eg id='m2d5' for the 5th February.
Then you can use the value of each of your SELECT elements to create the id and use:
var dayid = "m"+month.value+"d"+day.value;
document.getElementById('dayid').className = 'lit'
If you want only one cell highlighted you'll either have to keep track of the id of the cell you last lit or use something like
var reset = document.getElementsByClassName("lit");
while (reset.length) { reset[0].className = "normal"; }
To find and reset any lit ones..

Categories

Resources