Find the closest number in a table to a specific number

Find the closest number in a table to a specific number - javascript

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>

Related

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>

Filtering html table using jQuery

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>

Pre-populating the select dropdown with the selected table row

I have a table structure like this
Fruit Price Qty
Apple 30 10
Orange 20 20
Grapes 12 10
pineapple 10 5
Now when I select any row from this table, I want to pre-set the corresponding value in select dropdown.
For e.g if I select Apple from the table, I need to pre-set the corresponding values of the selected row from table in select statement i.e Fruit = Apple, Price = 30 and Qty = 10 in my corresponding select statement.
How can I do that?

DEMO HERE
Assuming your html to be as below:
<table class="fruits">
<thead>
<th>Fruit</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
</table>
JS
$('.fruits tr').on('click',function(){
var fruit = $(this).find('td:first-child').text().trim();
var price=$(this).find('td:nth-child(2)').text().trim();
var qty=$(this).find('td:last-child').text().trim();
alert("Fruit =" + fruit+", Price =" + price +", Qty = "+qty);
//Can use those values and pass as parameter to your select statement
});

Try this
$(function() {
$('tr').click(function() {
var sid = 0;
$(this).find('td').each(function() {
sid++;
$('#s' + sid).val($(this).text());
});
});
});
table {
border-collapse: collapse;
}
tr,
td {
border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Fruit</td>
<td>Price</td>
<td>Qty</td>
</tr>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</table>
<br/>Fruit:
<select id="s1">
<option>--Select--</option>
<option>Apple</option>
<option>Orange</option>
<option>Grapes</option>
<option>Pineapple</option>
</select>
<br/>Price:
<select id="s2">
<option>--Select--</option>
<option>30</option>
<option>20</option>
<option>12</option>
<option>10</option>
</select>
<br/>Qty:
<select id="s3">
<option>--Select--</option>
<option>10</option>
<option>20</option>
<option>10</option>
<option>5</option>
</select>

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..

Develop Reference

JavaScript is the programming language of the Web.

Find the closest number in a table to a specific number - javascript

Related

How to filter data from options for special column jQuery

multiple select filter in javasvript

Filtering html table using jQuery

Pre-populating the select dropdown with the selected table row

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

Categories

Resources