how to display tables in html using dropdown list selcection - javascript

I want to display the data based on selection in drop-down list.
for example if i select empty then it display all table data.
if i select 'a' then it will display data in rows 'a'..
please suggest how to achieve this requirement.
<html>
<head>
<title>details</title>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
</head>
<div>
<body>
<h1>details</h1>
<select>
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
</table>
</body>
</div>
</html>


cooTry this using with jquery script. Matching the contains() word's from selected input
Updated answer for single HTML page
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function change(that) { //in this get the value of changing input
var a = $(that).val() //its the value of selected data
if (a != "") { //it's check the not empty condition
$('tr').not('tr[bgcolor="#C2D0C7"]').hide() //its prevent the heading row `not()`
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').show() //match the seleted value to display
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').next().show()
//it matches the next row of other two columns it is the same in the first column
} else {
$('tr').show() //it selects empty data show all rows
}
}
</script>
</head>
<body>
<h1>details</h1>
<select onchange="change(this)">
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
</table>
</body>
</html>


i am not Giving you the Complete solution but it will help you more.
HTML
<select id="drop">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
JavaScript
$("#drop").change(function () {
var selectedvalue= this.value;
if(selectedvalue==0)
{
//clear the table
//get all results and show in table
}
else
{
//Clear the table
//get all records based on selectedvalue and display as you wish
}
});

Related

How do I get my checkboxes to filter together with my select statement?

I have a select statement and when someone selects a state it returns all the rows with states that match. I have two checkboxes and they return only rows that match. I'm not sure how to combine these two functions so that they will listen to each other. I would like my checkbox to further filter the results For instance if you select Texas as your state and then click the textbox Spanish speaking I would like all Texas events that have Spanish Speaking. If the state is Texas and both Spanish Speaking and Family friendly are checked i'd like all events where state is Texas and both family friendly are checked to return. I have condensed my code so you can see how both of these work on my table.
<script>
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters selected, show all items
$("#myTable-events tbody tr").show();
} else { // otherwise, hide everything...
$("#myTable-events tbody tr").hide();
$("#myTable-events tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ` `) { show = false; }
else if (row.find('td' + className).html() == ` `) { show = false; }
});
if (show) { row.show(); }
});
}
});
</script>
<!-- End of Checkbox code -->
<!-- State Dropdown Code -->
<script>
$("#filter").change(function() {
var filterValue = $(this).val();
var row = $('.row-events');
console.log(filterValue);
row.hide();
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='label-state-text'>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="NC">North Carolina</option>
<option value="SC">South Carolina</option>
<option value="TX">Texas</option>
</select>
</form>
<!-- Checkbox code -->
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="family" />
<label for="filter_1">Family Friendly?</label>
<input type="checkbox" name="filterStatus" value="ESP" />
<label for="filter_2">Spanish Speaking?</label>
</form>
<table id="myTable-events">
<thead>
<tr>
<th class='event_heading'> Name </th>
<th class='event_heading'> Date </th>
<th class='event_heading'> State </th>
<th class='event_heading'> Family Friendly </th>
<th class='event_heading'> Spanish Speaking </th>
</tr>
</thead>
<tr class="row-events" data-type="TX">
<td> Event 1 </td>
<td> 10/22/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 11 </td>
<td> 10/22/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 2 </td>
<td> 09/20/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="NC">
<td> Event 3 </td>
<td> 06/18/2023 </td>
<td> North Carolina </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="SC">
<td> Event 4 </td>
<td> 05/02/2023 </td>
<td> South Carolina </td>
<td class="family"> </td>
<td class="ESP">Yes</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 5 </td>
<td> 12/29/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 6 </td>
<td> 11/20/2023 </td>
<td> California </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AZ">
<td> Event 7 </td>
<td> 08/09/2023 </td>
<td> Arizona </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 8 </td>
<td> 10/19/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 9 </td>
<td> 08/04/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AK">
<td> Event 10 </td>
<td> 03/26/2023 </td>
<td> Alaska </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
</table>`
I like the way each of these functions work on their own but I can't figure out how to combine them and get them to filter together.

You can combine them like this:
$("input[name='filterStatus'], #filter").change(function() {
var classes = [];
var filterValue = $("#filter").val();
var row = $('.row-events');
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
row.hide();
row.each(function(i, el) {
if ((classes == "" || classes.some(function(className) {
return $(el).find('td' + className).html() != ` `;
})) && (filterValue == "all" || $(el).attr('data-type') == filterValue)) {
$(el).show();
}
});
});
Demo
$("input[name='filterStatus'], #filter").change(function() {
var classes = [];
var filterValue = $("#filter").val();
var row = $('.row-events');
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
row.hide();
row.each(function(i, el) {
if ((classes == "" || classes.some(function(className) {
return $(el).find('td' + className).html() != ` `;
})) && (filterValue == "all" || $(el).attr('data-type') == filterValue)) {
$(el).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='label-state-text'>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="NC">North Carolina</option>
<option value="SC">South Carolina</option>
<option value="TX">Texas</option>
</select>
<!-- Checkbox code -->
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="family" />
<label for="filter_1">Family Friendly?</label>
<input type="checkbox" name="filterStatus" value="ESP" />
<label for="filter_2">Spanish Speaking?</label>
</form>
<table id="myTable-events">
<thead>
<tr>
<th class='event_heading'> Name </th>
<th class='event_heading'> Date </th>
<th class='event_heading'> State </th>
<th class='event_heading'> Family Friendly </th>
<th class='event_heading'> Spanish Speaking </th>
</tr>
</thead>
<tr class="row-events" data-type="TX">
<td> Event 1 </td>
<td> 10/22/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 11 </td>
<td> 10/22/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 2 </td>
<td> 09/20/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="NC">
<td> Event 3 </td>
<td> 06/18/2023 </td>
<td> North Carolina </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="SC">
<td> Event 4 </td>
<td> 05/02/2023 </td>
<td> South Carolina </td>
<td class="family"> </td>
<td class="ESP">Yes</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 5 </td>
<td> 12/29/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 6 </td>
<td> 11/20/2023 </td>
<td> California </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AZ">
<td> Event 7 </td>
<td> 08/09/2023 </td>
<td> Arizona </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 8 </td>
<td> 10/19/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 9 </td>
<td> 08/04/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AK">
<td> Event 10 </td>
<td> 03/26/2023 </td>
<td> Alaska </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
</table>

How to filter a table based off search parameters or a select value

Someone on here kindly helped me with my code to get a table of content to filter based off 2 select drop downs. Its working great but I'm not trying to also get it to filter off a url parameter e.g ?role=CommunicationManager
I'd appreciate the help
<script>
function searchTable () {
const params = new URLSearchParams(window.location.search);
const filter3 = params.get('role');
const filter1 = document.getElementById("myInput").value.trim();
const filter2 = document.getElementById("myInput2").value.trim();
const tableRows = document.getElementById("myTable").getElementsByTagName("tr");
for (const tr of tableRows) {
if (tr.id === 'tableHeader') continue;
const td1 = tr.querySelector("td:nth-of-type(1)");
const td2 = tr.querySelector("td:nth-of-type(3)");
const shouldBeVisible = (
td1.textContent.trim().includes(filter1)
|| td1.textContent.trim().includes(filter1)
&& td2.textContent.trim().includes(filter2)
);
tr.style.display = shouldBeVisible ? "" : "none";
}
}
</script>
<div class="tableselects">
<div class="myinput1"><select id="myInput" onchange="searchTable()">
<option disabled="disabled" selected="selected" value="">Job Title</option>
<option value="">All Jobs</option>
<option value="CMO">CMO</option>
<option value="HeadofMarketing">Head of Marketing</option>
<option value="HeadofDigitalMarketing">Head of Digital Marketing</option>
<option value="SeniorMarketingManager">Senior Marketing Manager</option>
<option value="MarketingManager">Marketing Manager</option>
<option value="DigitalMarketingManager">Digital Marketing Manager</option>
<option value="SeniorMarketingExecutive">Senior Marketing Executive</option>
<option value="MarketingExecutive">Marketing Executive</option>
<option value="DigitalMarketingExecutive">Digital Marketing Executive</option>
<option value="MarketingAssistant">Marketing Assistant</option>
<option value="BrandManager">Brand Manager</option>
<option value="CampaignManager">Campaign Manager</option>
<option value="CommunicationManager">Communication Manager</option>
<option value="CRMManager">CRM Manager</option>
<option value="CRMAnalyst">CRM Analyst</option>
<option value="PPCManager">PPC Manager</option>
<option value="PPC Executive">PPC Executive</option>
<option value="SEOManager">SEO Manager</option>
<option value="SEOExecutive">SEO Executive</option>
<option value="EventManager">Event Manager</option>
<option value="EventExecutive">Event Executive</option>
</select></div>
<div class="myinput2"><select id="myInput2" onchange="searchTable()">
<option selected="selected" value="National Average">National Average</option>
<option value="London">London</option>
<option value="SouthEast">South East</option>
<option value="SouthWest">South West</option>
<option value="EastEast">East</option>
<option value="WestMidlands">West Midlands</option>
<option value="EastMidlands">East Midlands</option>
<option value="Yorkshire">Yorkshire</option>
<option value="NorthEast">North East</option>
<option value="Scotland">Scotland</option>
<option value="Wales">Wales</option>
</select></div>
</div>
<div class="scroll-container">
<table id="myTable">
<tbody>
<tr id="tableHeader" class="header">
<th class="rolecat" style="background-color: #eaeaea;">Role Category</th>
<th style="width: 45%;" align="left">Title</th>
<th class="regionselect" style="background-color: #eaeaea;">Region</th>
<th class="quartile" style="width: 16%;">Lower Quartile</th>
<th class="quartile" style="width: 16%;">Median</th>
<th class="quartile" style="width: 16%;">Upper Quartle</th>
<th style="width: 3%;"></th>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">National Average</td>
<td class="quartile">£98,129 </td>
<td class="quartile">£119,156 </td>
<td class="quartile">£140,184 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">London</td>
<td class="quartile">£112,000 </td>
<td class="quartile">£136,000 </td>
<td class="quartile">£160,000 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">SouthEast</td>
<td class="quartile">£103,704 </td>
<td class="quartile">£125,926 </td>
<td class="quartile">£148,148 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">SouthWest</td>
<td class="quartile">£96,552 </td>
<td class="quartile">£117,241 </td>
<td class="quartile">£137,931 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">EastEast</td>
<td class="quartile">£100,000 </td>
<td class="quartile">£121,429 </td>
<td class="quartile">£142,857 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">WestMidlands</td>
<td class="quartile">£97,391 </td>
<td class="quartile">£118,261 </td>
<td class="quartile">£139,130 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">EastMidlands</td>
<td class="quartile">£97,391 </td>
<td class="quartile">£118,261 </td>
<td class="quartile">£139,130 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">Yorkshire</td>
<td class="quartile">£94,118 </td>
<td class="quartile">£114,286 </td>
<td class="quartile">£134,454 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">NorthEast</td>
<td class="quartile">£93,333 </td>
<td class="quartile">£113,333 </td>
<td class="quartile">£133,333 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">NorthWest</td>
<td class="quartile">£94,118 </td>
<td class="quartile">£114,286 </td>
<td class="quartile">£134,454 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">Scotland</td>
<td class="quartile">£98,246 </td>
<td class="quartile">£119,298 </td>
<td class="quartile">£140,351 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">CMO </td>
<td>CMO </td>
<td class="regionselect">Wales</td>
<td class="quartile">£92,562 </td>
<td class="quartile">£112,397 </td>
<td class="quartile">£132,231 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing </td>
<td>Head of Marketing </td>
<td class="regionselect">National Average</td>
<td class="quartile">£70,092 </td>
<td class="quartile">£78,853 </td>
<td class="quartile">£87,615 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">London</td>
<td class="quartile">£80,000 </td>
<td class="quartile">£90,000 </td>
<td class="quartile">£100,000 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">SouthEast</td>
<td class="quartile">£74,074 </td>
<td class="quartile">£83,333 </td>
<td class="quartile">£92,593 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">SouthWest</td>
<td class="quartile">£68,966 </td>
<td class="quartile">£77,586 </td>
<td class="quartile">£86,207 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">EastEast</td>
<td class="quartile">£71,429 </td>
<td class="quartile">£80,357 </td>
<td class="quartile">£89,286 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">WestMidlands</td>
<td class="quartile">£69,565 </td>
<td class="quartile">£78,261 </td>
<td class="quartile">£86,957 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">EastMidlands</td>
<td class="quartile">£69,565 </td>
<td class="quartile">£78,261 </td>
<td class="quartile">£86,957 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">Yorkshire</td>
<td class="quartile">£67,227 </td>
<td class="quartile">£75,630 </td>
<td class="quartile">£84,034 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">NorthEast</td>
<td class="quartile">£66,667 </td>
<td class="quartile">£75,000 </td>
<td class="quartile">£83,333 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">NorthWest</td>
<td class="quartile">£67,227 </td>
<td class="quartile">£75,630 </td>
<td class="quartile">£84,034 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">Scotland</td>
<td class="quartile">£70,175 </td>
<td class="quartile">£78,947 </td>
<td class="quartile">£87,719 </td>
<td></td>
</tr>
<tr>
<td class="rolecat">HeadofMarketing</td>
<td>Head of Marketing </td>
<td class="regionselect">Wales</td>
<td class="quartile">£66,116 </td>
<td class="quartile">£74,380 </td>
<td class="quartile">£82,645 </td>
<td></td>
</tr>
<tr>
</tbody>
</table>
</div>
I've tried a few different options but can't quite get it working. Here is my current code. It seems to work from the Search Paramter but stops the 1st drop down working.

how to span html table when selecting particular row and column from select input?

IF you select day and time that slot turn vertically like change value of rowspan and colspan base on selection you can view in image link in this blog
view image click here
$("#hour,#day").on("click",function(){
var id = $("#hour").children(":selected").attr("value");
var idi = $("#day").children(":selected").attr("value");
res=idi.concat(id);
document.getElementById("demo").innerHTML = res;
$("#"+res).css("color","red")
});
#timetable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: separate;
width: 100%;
}
#timetable td, #timetable th {
border: 1px solid #ddd;
padding: 8px;
}
#timetable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form method="post" action="Select_lab.php">
<center>
<h4>Select Day And Time Where you want to add LABORATORY Slot in table</h4>
<br>
<B><label>Select Day:</label></B><select id="day" name="day">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
</select>
<B> <label>Select Hour:</label></B><select name="hour" id="hour">
<option value="0">10:30 To 11:30</option>
<option value="1">11:30 To 12:30</option>
<option value="3">2:00 To 3:00</option>
<option value="4">3:00 To 4:00</option>
<option value="5">4:00 To 5:00</option>
<option value="6">5:00 To 6:00</option>
</select>
<input type="submit" id="submit" value="Submit" name="submit"><br>
<p id="demo"></p>
</center>
<table id="timetable">
<tr>
<th></th>
<th >Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<th>10:30 to 11:30</th>
<td id="00">00</td>
<td id="10">10</td>
<td id="20">20</td>
<td id="30">30</td>
<td id="40">40</td>
<td id="50">50</td>
</tr>
<tr>
<th>11:30 to 12:30</th>
<td id="01">01</td>
<td id="11">11</td>
<td id="21">21</td>
<td id="31">31</td>
<td id="41">41</td>
<td id="51">51</td>
</tr>
<tr>
<th>12:30 to 1:30</th>
<td id="02">02</td>
<td id="12">12</td>
<td id="22">22</td>
<td id="32">32</td>
<td id="42">42</td>
<td id="52">52</td>
</tr>
<tr>
<th>1:30 to 2:00</th>
<td colspan="6"> <center>Reccess</center></td>
</tr>
<tr>
<th>2:00 to 3:00</th>
<td id="03">03</td>
<td id="13">13</td>
<td id="23">23</td>
<td id="33">33</td>
<td id="43">43</td>
<td id="53">53</td>
</tr>
<tr>
<th>3:00 to 4:00</th>
<td id="04">04</td>
<td id="14">14</td>
<td id="24">24</td>
<td id="34">34</td>
<td id="44">44</td>
<td id="54">54</td>
</tr>
<tr>
<th>4:00 to 5:00</th>
<td id="05">05</td>
<td id="15">15</td>
<td id="25">25</td>
<td id="35">35</td>
<td id="45">45</td>
<td id="55">55</td>
</tr>
<tr>
<th id="1">5:00 to 6:00</th>
<td id="06">06</td>
<td id="16">16</td>
<td id="26">26</td>
<td id="36">36</td>
<td id="46">46</td>
<td id="56">56</td>
</tr>
</table>
</form>
dd LABORATORY Slot in table</h4></br>
<B> <label>Select Day:</label></B><select id="day" name="day">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</otion>
</select>
<B> <label>Select Hour:</label></B><select name="hour" id="hour">
<option value="0">10:30 To 11:30</option>
<option value="1">11:30 To 12:30</option>
<option value="3">2:00 To 3:00</option>
<option value="4">3:00 To 4:00</option>
<option value="5">4:00 To 5:00</option>
<option value="6">5:00 To 6:00</option>
</select>
<input type="submit" id="submit" value="Submit" name="submit"></br>
<?php
if (isset($_POST['salarieid'])) {
$_SESSION['div'] = $_POST['salarieid'];
echo $_SESSION['div'];}
if (isset($_POST['day'])) {
$_SESSION['day'] = $_POST['day'];
echo $_SESSION['day'];
}
if (isset($_POST['hour'])) {
$_SESSION['hour'] = $_POST['hour'];
echo $_SESSION['hour'];}
?>
<p id="demo"></p>
</center>
<table id="timetable">
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<th>10:30 to 11:30</th>
<td id="00" rowspan="2">00</td>
<td id="10" rowspan="2">10</td>
<td id="20">20</td>
<td id="30">30</td>
<td id="40">40</td>
<td id="50">50</td>
</tr>
<tr>
<th>11:30 to 12:30</th>
<td id="01">01</td>
<td id="11">11</td>
<td id="21">21</td>
<td id="31">31</td>
<td id="41">41</td>
<td id="51">51</td>
</tr>
<tr>
<th>12:30 to 1:30</th>
<td id="02">02</td>
<td id="12">12</td>
<td id="22">22</td>
<td id="32">32</td>
<td id="42">42</td>
<td id="52">52</td>
</tr>
<tr>
<th>1:30 to 2:00</th>enter code here
<td colspan="6"> <center>Reccess</center></td>
</tr>
<tr>
<th>2:00 to 3:00</th>
<td id="03">03</td>
<td id="13">13</td>
<td id="23">23</td>
<td id="33">33</td>
<td id="43">43</td>
<td id="53">53</td>
</tr>
<tr>
<th>3:00 to 4:00</th>
<td id="04">04</td>
<td id="14">14</td>
<td id="24">24</td>
<td id="34">34</td>
<td id="44">44</td>
<td id="54">54</td>
</tr>
<tr>
<th>4:00 to 5:00</th>
<td id="05">05</td>
<td id="15">15</td>
<td id="25">25</td>
<td id="35">35</td>
<td id="45">45</td>
<td id="55">55</td>
</tr>
<tr>
<th id="1">5:00 to 6:00</th>
<td id="06">06</td>
<td id="16">16</td>
<td id="26">26</td>
<td id="36">36</td>
<td id="46">46</td>
<td id="56">56</td>
</tr>
</form>
<script type="text/javascript">
$("#hour,#day").on("click",function(){
var id = $("#hour").children(":selected").attr("value");
var idi = $("#day").children(":selected").attr("value");
res=idi.concat(id);
document.getElementById("demo").innerHTML = res;
$("#"+res).css("color","red")
});
</script>
</body>
</html>

How to sort table by date string in javascript/ jquery...?

I am trying to sort table by date it works in Chrome but does not work in IE and Mozilla browsers?
JSFIDDLE
<article>
<div style="margin-bottom: 10px;">
<label for="dept" class="lbl-title">Select Department :</label> <select
name="dept" id="dept" class="select_dept">
<option value="">All</option>
<option value="DEPT-1">Information Technology Department</option>
<option value="DEPT-2">Networking Department</option>
<option value="DEPT-3">Testing Department</option>
<option value="DEPT-4">Account Department</option>
<option value="DEPT-5">Sales Department</option>
<option value="DEPT-6">Marketing Department</option>
</select>
</div>
<table class="table" id="tbl-dept" border="1">
<thead>
<tr>
<th class="layout-1">Department Name</th>
<th>Description</th>
<th class="layout-1" id="sort"
style="cursor: pointer; background: red;">Date
<span class="arrow">⇅</span></a><input type="hidden"
id="sort-direction" value="SORT_ASC" />
</th>
</tr>
</thead>
<tbody>
<tr class="DEPT-1">
<td>Information Technology Department</td>
<td>Sample description</td>
<td>06 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-2">
<td>Networking Department</td>
<td>Sample description</td>
<td>02 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-3">
<td>Testing Department</td>
<td>Sample description</td>
<td>05 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-4">
<td>Account Department</td>
<td>Sample Description</td>
<td>01 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Sales Department</td>
<td>Sample Description</td>
<td>03 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Marketing Department</td>
<td>Sample Description</td>
<td>04 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
</tbody>
</table>
</article>
$(document).ready(function(){
$("#sort").on("click",function (e) {
e.preventDefault();
if ($("#sort-direction").val() === "SORT_ASC") {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(a).find('td:eq(2)').text()).getTime() - new Date($(b).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_DESC");
} else {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(b).find('td:eq(2)').text()).getTime() - new Date($(a).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_ASC");
}
});
$("#dept").on("change", function () {
var cls = $(this).val();
if (cls === "") {
$("#tbl-dept tbody tr").show();
} else {
$("#tbl-dept tbody tr").hide();
$("#tbl-dept tbody tr." + cls).show();
}
});
});

You need to use the debugger in Firefox and inspect your sort comparator function. Check that your date values are not NaN. (use isNaN).
I've simplified and fixed your code.
De-duplicate lines code by setting variables instead of using if/else.
sort function returns either 1 or -1 explicitly. (Just because JS lets you be dirty, doesn't mean you should be dirty)
Always check for NaN values and set to something explicit, such as Infinity.
http://jsfiddle.net/tcqv58ke/2/

The problem is that Date returns NaN when the text is empty (Chrome seems to be more flexible), which causes the sort to fail. You could alter your current sort into something like:
new Date($(tr).find('td:eq(2)').text()).getTime() || 0
The || 0 makes sure a number is returned. Best is to have a helper function so you don't have repeated code and don't have to alter each occurrence.
Example Fiddle

jquery to highlight the selected row and column in a table

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest.
Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/
Below is the html code:
<div>
<table>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">
<br>Column1
</td>
<td bgcolor="grey">
<br>Column2
</td>
<td bgcolor="grey">
<br>Column3
</td>
<td bgcolor="grey">
<br>Column4
</td>
<td bgcolor="grey">
<br>Column5
</td>
</tr>
<tr>
<td bgcolor="grey" >Row1</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
</table></td></tr></table></div>
--EDIT--
I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight.
Thanks.

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:
http://css-tricks.com/row-and-column-highlighting/
The best way is shown here:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>test</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

You can simplify your table like this:
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
Many people close trs and tds, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags.)
All presentation styles should be done in a CSS style sheet, like this:
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
With jQuery, you can add a hover event to the table's tds, which toggle the hovered class for the td's parent row and all the tds in its column:
$('td').hover(function() {
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
Fiddle
Edit
Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:
$('table:first-child').replaceWith($('table', 'table:first-child').html());
$('table').each(function() {
var td= $('td', this);
if(td.length === 1) {
$(this).replaceWith(td.html());
}
});
This allows the highlighting code to work on your existing HTML.
New Fiddle

Categories