asked on
<style>
th, td {
padding: 15px;
text-align: left;
}
tr:hover {background-color: #f5f5f5;}
table {
width: 100%;
}
</style>
<div id="cleaningTableDiv">
</div>
<script>
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(), 0, 1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
}
function plainTableCreate(currentWeekNumber) {
// Table variables
var teamMembers = ["Flatmate1", "Flatmate2", "Flatmate3", "Flatmate4", "Flatmate5", "Flatmate6"];
var rowNumber = 7;
var colNumber = teamMembers.length * 2 + 1;
var headings = ["Week number"]
for (var i = 0; i < colNumber - 1; i++) {
headings.push(currentWeekNumber + i);
}
// Creating table
var body = document.getElementById('cleaningTableDiv');
var tbl = document.createElement('table');
tbl.setAttribute("id", "cleaningTable");
var tbdy = document.createElement('tbody');
for (var i = 0; i < rowNumber; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < colNumber; j++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
// Populating headings
for (var i=0; i < headings.length; i++){
document.getElementById("cleaningTable").rows[0].cells[i].innerHTML = headings[i];
}
// Populating 1st column with Team Members
for (var i=1; i < rowNumber; i++){
document.getElementById("cleaningTable").rows[i].cells[0].innerHTML = teamMembers[i-1];
}
// Populating X
for (var i=1; i < rowNumber; i++){
for (var j=1; j < colNumber; j++){
if (i == 4) {
// Flatmate 4 started cleaning week 1 and 2, next rotation will happen every 2
// weeks, for example flatmate 5 will clean week 3 and 4, flatmate 6 will clean
// week 5 and 6, flatmate 6 will clean week 7 and 8, flatmate 1 will clean
// week 9 and 10 and so on...
document.getElementById("cleaningTable").rows[i].cells[j].innerHTML = "X";
}
console.log(document.getElementById("cleaningTable").rows[0].cells[j].innerHTML);
}
}
}
var currentWeekNumber = (new Date()).getWeek();
plainTableCreate(currentWeekNumber);
</script>