Looking to create a responsive table where row content becomes bold if it matches the current date.
Hiding the first-child th & td as they are only needed for a specific function.
Comparing values in
<td data-label="TodaysDate">06-05-2020</td><td data-label="Date">05-05-2020</td>If TodaysDate = Date, then the row needs to be made bold.
How can this be achieved using javascript?
https://codepen.io/KGuide/pen/MWwMZzP
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();<!-- CSS code here --><!-- Table content here -->Using the above code snippet to analyze and style the table rows accordingly.
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();