I'm working on a table, that displays data from loop and the whole row is being appended. The code is working fine, its just when I inspect element I notice that the <td> is outside <tr>, how can I fix it.
hope you help me.
thanks.
var dataNum = 10;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
In your code, you are appending tr and td both to tbody. You need to append td to tr
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr></tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody tr:last').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody tr:last').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
}
Your
$('table tbody').append('<td>'...
is appending tds to the tbody.
Try creating the tr first, appending it to the tbody, and then append tds to the tr:
var dataNum = 10;
for (let t = 1; t <= dataNum; t++) {
const $tr = $('<tr></tr>');
$('table tbody').append($tr);
for (var j = 0; j < 9; j++) {
if (j == 0) {
$tr.append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$tr.append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
That is because of the following line.
$('table tbody').append('<tr>'); This actually appends the tr into the DOM. So basically, <tr></tr> gets autocompleted since browser is smart and tries to ensure valid HTML DOM structure. What you should ideally do is create a string that stores entire DOM structure you need and append it at the end since DOM manipulations are slow.
var dataNum = 10;
var str='';
for (let t = 1; t <= dataNum; t++) {
str += '<tr>';
for (var j = 0; j < 9; j++) {
if (j == 0) {
str += '<td>' + todayDate() + '-' + deci(t) + '</td>';
} else if (j == 1) {
str+= '<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>';
}
}
str += '</tr>';
}
$('table tbody').append(str);
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
Related
I am needing to convert 5 columns to TEXT before the program writes the data to it because Excel changes my 8 digit formatted date (MM/DD/YY) that gets outputted to those columns to the Date format (MM/DD/YYYY). The outputted date needs to stay in the 8 digit format in order to rerun it as the next input file to update the system. Any suggestions would be greatly appreciated. I have tried using:
ExcelSheet.ActiveSheet.Range("E:E").TextToColumns;
but it did not work. Here's all of the code:
<script>
function js_yyyy_mm_dd_hh_mm_ss () {
now = new Date();
year = "" + now.getFullYear();
month = "" + (now.getMonth() + 1);
if (month.length == 1) { month = "0" + month; }
day = "" + now.getDate();
if (day.length == 1) { day = "0" + day; }
hour = "" + now.getHours();
if (hour.length == 1) { hour = "0" + hour; }
minute = "" + now.getMinutes();
if (minute.length == 1) { minute = "0" + minute; }
second = "" + now.getSeconds();
if (second.length == 1) { second = "0" + second; }
return month + "" + day + "" + year.substring(2) + "" + hour + "" + minute + "" + second; }
function pad(num, len) { var str = '' + num; while (str.length < len) { str = '0' + str; } return str; } function writeToExcel() { try { var loanStr; var FullRecs; var passFail; var Processed = 0; var Rejected = 0; var D9ID; var time; var date; var datetime; var row = 0; var col; var str = document.getElementById("outstr").value; var headerStr = "|Account|Stop_Code_1|SC_1_Date|Stop_Code_2|SC_2_Date|Stop_Code_3|SC_3_Date|Lockout_Code|Lock_Date|Warning_Code|Warning_Date|"; var ExcelSheet = new ActiveXObject("Excel.Application"); var excelBook = ExcelSheet.Workbooks.Add; var RSheet = excelBook.Worksheets(1); ExcelSheet.Worksheets.Activate; ExcelSheet.ActiveSheet.Name = "Removals-" + js_yyyy_mm_dd_hh_mm_ss (); var outputdate = month + "-" + day + "-" + year.substring(2); var outputtime = hour + "-" + minute; var writefilepath = document.getElementById("writepath").value; var filepath = writefilepath.substring(0, writefilepath.lastIndexOf("\\") + 1); filepath = filepath + "DEL LOAN CODE Removal" + "_" + outputdate + "_" + outputtime + "_" + "OUTPUT" + ".xlsx"; date = month + "/" + day + "/" + year.substring(2); time = hour + ":" + minute + ":" + second; RSheet.Cells(1, 3).ColumnWidth = 15; RSheet.Cells(1, 4).ColumnWidth = 15; RSheet.Cells(1, 5).ColumnWidth = 15; RSheet.Cells(1, 6).ColumnWidth = 15; RSheet.Cells(1, 7).ColumnWidth = 15; RSheet.Cells(1, 8).ColumnWidth = 15; RSheet.Cells(1, 9).ColumnWidth = 15; RSheet.Cells(1, 10).ColumnWidth = 15; RSheet.Cells(1, 11).ColumnWidth = 15; RSheet.Cells(1, 12).ColumnWidth = 15; RSheet.Cells(1, 13).ColumnWidth = 15; ExcelSheet.ActiveSheet.Cells(1, 1).value = ""; var headings = headerStr.split("|"); for(var k = 0; k < (headings.length - 1); k ++ ) { ExcelSheet.ActiveSheet.Cells(7, k + 2).value = headings[k]; } FullRecs = str.split("~~"); for(var m = 0; m < (FullRecs.length - 1); m = m + 2) { loanStr = FullRecs[m].split("^"); for(var i = 0; i < (loanStr.length - 1); i ++ ) { var fieldStr = loanStr[i].split("|"); for(var j = 0; j < (fieldStr.length); j ++ ) { ExcelSheet.ActiveSheet.Cells(row + 8, j + 2).value = fieldStr[j]; } row = row + 1; } } for(var n = 1; n <= (FullRecs.length - 1); n = n + 2) { passFail = FullRecs[n].split("|"); D9ID = passFail[0]; Processed = Processed + Number(passFail[1]); Rejected = Rejected + Number(passFail[2]); } var total = Number(Processed) + Number(Rejected) ; ExcelSheet.ActiveSheet.Cells(2, 2).value = "USER"; ExcelSheet.ActiveSheet.Cells(2, 4).value = "SUMMARY"; ExcelSheet.ActiveSheet.Cells(3, 2).value = "DATE"; ExcelSheet.ActiveSheet.Cells(3, 3).value = date; ExcelSheet.ActiveSheet.Cells(4, 2).value = "TIME"; ExcelSheet.ActiveSheet.Cells(4, 3).value = time; ExcelSheet.ActiveSheet.Cells(2, 3).value = D9ID; ExcelSheet.ActiveSheet.Cells(3, 4).value = "PROCESSED ITEMS"; ExcelSheet.ActiveSheet.Cells(3, 5).value = + Processed; ExcelSheet.ActiveSheet.Cells(4, 4).value = "REJECTED ITEMS"; ExcelSheet.ActiveSheet.Cells(4, 5).value = + Rejected; ExcelSheet.ActiveSheet.Range("B2, B3, B4, D2, D3, D4, B7, C7, D7, E7, F7, G7, H7,I7,J7,K7,L7,M7").Font.Bold = true; for( var rb = 2; rb < 5; rb ++ ) { for( var cb = 2; cb < 6; cb ++ ) { RSheet.Cells(rb, cb).BorderAround(1).LineStyle = 1; } } for( var datarow = 7; datarow <= (7 + Number(total)); datarow ++ ) { for( var datacolumn = 3; datacolumn < 14; datacolumn ++ ) { RSheet.Cells(datarow, datacolumn).BorderAround(1).LineStyle = 1; } } ExcelSheet.ActiveSheet.Columns("A:P").HorizontalAlignment = 2; ExcelSheet.ActiveSheet.Range("C2", "C4").HorizontalAlignment = 3; ExcelSheet.ActiveSheet.Range("E2", "E4").HorizontalAlignment = 3; excelBook.SaveAs(filepath); ExcelSheet.Visible = false; ExcelSheet.UserControl = true; ExcelSheet.Application.Quit(); return true; } catch(e) { if(e.number == - 2146827284) { alert(e.description + ". Please close the document."); ExcelSheet.Application.Quit(); ExcelSheet.Quit(); ExcelSheet = null; return false; } } } </script>
var count = -1;
var countLetter = "";
for (outer = 0; outer < 2; outer++) {
for (inner = 0; inner < 2; inner++) {
for (third = 0; third < 2; third++) {
for (fourth = 0; fourth < 2; fourth++) {
count++;
countLetter = count;
document.write(countLetter + "|" + "" + outer + "" + inner + "" + third + "" + fourth + ".</br>");
}
}
}
}
I attempted to add an if(count)=10{counterLetter="A"} and so on but this didn't work, either broke the code or ended up doing something wacky. Any help appreciated!
According to Number.prototype.toString() you may write:
countLetter = count.toString(16).toUpperCase();
The snippet:
var count = -1;
var countLetter = "";
for (outer = 0; outer < 2; outer++) {
for (inner = 0; inner < 2; inner++) {
for (third = 0; third < 2; third++) {
for (fourth = 0; fourth < 2; fourth++) {
count++;
countLetter = count.toString(16).toUpperCase();
document.write(countLetter + "|" + "" + outer + "" + inner + "" + third + "" + fourth + ".</br>");
}
}
}
}
A shorter version:
for (i = 0; i < 16; i++) {
document.write(i.toString(16).toUpperCase() + "|" + ("000" + i.toString(2)).slice(-4) + ".</br>");
}
I'n new to programming and I tried something in JavaScript and it worked well in Chrome. But It fails to work in IE, Firefox, Safari and Opera. Am I doing anything wrong with my code?
function hp(form) {
var count1 = 0, count2 = 0, count3 = 0, count4 = 0, count5 = 0, count6 = 0, count7 = 0, count8 = 0, count9 = 0, count10 = 0;
for (var i = 0; i < 3; i++) {
if (form.q1[i].checked == true) {
count1++;
}
}
if (count1 !== 1) {
alert("Please Answer 1st Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q2[i].checked == true) {
count2++;
}
}
if (count2 !== 1) {
alert("Please Answer 2nd Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q3[i].checked == true) {
count3++;
}
}
if (count3 !== 1) {
alert("Please Answer 3rd Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q4[i].checked == true) {
count4++;
}
}
if (count4 !== 1) {
alert("Please Answer 4th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q5[i].checked == true) {
count5++;
}
}
if (count5 !== 1) {
alert("Please Answer 5th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q6[i].checked == true) {
count6++;
}
}
if (count6 !== 1) {
alert("Please Answer 6th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q7[i].checked == true) {
count7++;
}
}
if (count7 !== 1) {
alert("Please Answer 7th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q8[i].checked == true) {
count8++;
}
}
if (count8 !== 1) {
alert("Please Answer 8th Question");
return false;
}
for (var i = 0; i < 4; i++) {
if (form.q9[i].checked == true) {
count9++;
}
}
if (count9 !== 1) {
alert("Please Answer 9th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q10[i].checked == true) {
count10++;
}
}
if (count10 !== 1) {
alert("Please Answer 10th Question");
return false;
}
answer1 = (form.q1.value);
answer2 = (form.q2.value);
answer3 = (form.q3.value);
answer4 = (form.q4.value);
answer5 = (form.q5.value);
answer6 = (form.q6.value);
answer7 = (form.q7.value);
answer8 = (form.q8.value);
answer9 = (form.q9.value);
answer10 = (form.q10.value);
var a = parseInt(answer1);
var b = parseInt(answer2);
var c = parseInt(answer3);
var d = parseInt(answer4);
var e = parseInt(answer5);
var f = parseInt(answer6);
var g = parseInt(answer7);
var h = parseInt(answer8);
var ii = parseInt(answer9);
var j = parseInt(answer10);
var c = a + b + c + d + e + f + g + h + ii + j;
//document.getElementById("result").innerHTML= "The selected values are "+"</br>"+a+"</br>"+b+c+d+e+f+g+h+ii+j+"</br>"+c;
if (c <= 20) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 20) && (c <= 25)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 25) && (c <= 30)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 30) && (c <= 40)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 40) && (c <= 50)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 50) && (c <= 60)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 60) && (c <= 65)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 65) && (c <= 75)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 75) && (c <= 90)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
c = 0;
}
I tried this code in local host and i got my desired output in Google Chrome. When i tried the same page in Firefox and other browser, it failed to work. Only checkbox validation is working fine.
Thanks in Advance
From personal experience, I have noticed that Chrome is more forgiving when it comes to small errors. It is strange how you are not getting an error in the debug box at all...
But, a place I can see from reading the code is where you define the variables a,b,c... I recommend placing a comma after each. So, you get:
var a = parseInt(answer1),
b = parseInt(answer2),
c = parseInt(answer3),
d = parseInt(answer4),
e = parseInt(answer5),
f = parseInt(answer6),
g = parseInt(answer7),
h = parseInt(answer8),
ii = parseInt(answer9),
j = parseInt(answer10);
Then here is where I think you have an error. You have var c = ... again after already defining c. So, try removing the var right there.
With this html:
<html>
<head>
<meta charset="UTF-8">
<title>Bonoloto</title>
<script src="bonoloto.js"></script>
<style>
table {border-collapse: collapse;}
td{border: 1px solid #000000; text-align: center; width: 6%;}
</style>
</head>
<body>
<script>
tables();
</script>
</body>
</html>
And this javascript:
var counter = 0;
var nr1 = Math.floor(Math.random() * 49 + 1),
nr2 = Math.floor(Math.random() * 49 + 1),
nr3 = Math.floor(Math.random() * 49 + 1),
nr4 = Math.floor(Math.random() * 49 + 1),
nr5 = Math.floor(Math.random() * 49 + 1);
document.write("Numbers: "+nr1+" "+nr2+" "+nr3+" "+nr4+" "+nr5);
function tables(){
document.write("<table>");
for(i = 1; i < 50; i++) {
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
if(i==nr1){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
}else{
document.write("<td>" + i + "</td>");
}
if(counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
This is the output:
I must highlight all the numbers like 25 is highlighted. Numbers are randomly generated and the aim is to highlight them in the table. I get stuck in here:
if(i==nr1){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
}else{
document.write("<td>" + i + "</td>");
}
If i place more if statements the table columns will "Multiply". I cant get that condition working properly...
Instead of nrXs, use an array of five random numbers. Then in if, check, if the array contains i. Something like this:
var counter = 0,
randoms = [],
n;
for (n = 0; n < 5; n++) {
randoms.push(Math.floor(Math.random() * 49 + 1));
}
function tables(){
document.write("<table>");
for(var i = 1; i < 50; i++) {
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
if (randoms.indexOf(i) > -1) {
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
} else {
document.write("<td>" + i + "</td>");
}
if (counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
tables();
Notice, that document.write is considered as a bad practice, use some DOM manipulation methods instead. In your case HTMLTableElement Interface seems to be suitable.
You can improve the code, since now it's possible to get doubled random numbers to the array.
Try this:
HTML:
<div id="container"></div>
JQUERY (as you can see makes things much simpler):
var colors=['red','yellow','blue','green'];
var i;
$("#container").append("<table></table>");
var tds="";
for(i=1;i<=50;i++){
if(i%10 == 0){
tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>"
$("table").append("<tr>"+tds+"</tr>");
tds="";
}
else{
tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>";
}
}
CSS:
table,td{
border:solid 1px;
}
table{
border-collapse:collapse;
}
td{
width:6%;
}
Live FIDDLE.
You can try this:
var counter = 0;
var randomNumbers = [];
for (var i = 0; i <= 5; i++) {
randomNumbers.push( Math.floor(Math.random() * 49 + 1));
};
document.write("Numbers: ");
for (var i = randomNumbers.length - 1; i >= 0; i--) {
document.write(randomNumbers[i]+", ");
};
function tables(){
document.write("<table>");
for(i = 1; i < 50; i++) {
var found = false;
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
for (var j = randomNumbers.length - 1; j >= 0; j--) {
if(i == randomNumbers[j]){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
found = true;
break;
}
};
if(!found){
document.write("<td>" + i + "</td>");
}
if(counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
tables();
this is my click function
$('.cal table tbody td').on('click', function () {
if($(this).hasClass('available'))
{
alert('asd');
}
});
the problem i am having is that after i have switched to the next or previous month, my clicking function on the calendar does not work.
For example in my JSFIDDLE, if u move to the previous month and then move back to the current month and do the click function, it wouldn't work anymore.
EDIT: I'm using an external library called date.js, check out my jsfiddle for a clearer idea of what is going on.
EDIT 2: updated jsfiddle link
jsfiddle
Use this
$(document).on('click','.cal table tbody td', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
instead of this
$('.cal table tbody td').on('click', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
Former is the correct replacement for delegate
one thing I notice immediately is that when you do things like:
$('#calendar tbody').append('<tr id = row'+i+'></tr>');
you need to remember that when you want to give an ID to an element the 'value' portion of the ID should be enclosed in quotations.
So you need to escape the string to include them so your browser can interpret the html properly.
ie
$('#calendar tbody').append('<tr id = \"row'+i+'\"></tr>');
that way your output looks like:
<tr id="rowx"></tr>
instead of:
<tr id=rowx></tr>
Your previous and next event handlers are recreating the DOM elements used for rendering the calendar. However, your click handler is only only attached to the elements that exist in the DOM at the time that handler is registered. The documentation of on() states:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on()
You'll probably need to re-register that click handler as part of your calendarInit() function after the new rows in the calendar - the new elements - have been rendered.
You may view a working version here. Or take a look at the updated jQuery below.
var firstday = new Date();
var lastday = new Date();
var calendarmonth = new Date();
var CCheck;
$(document).ready(function () {
Date.today();
firstday.setMonth(Date.today().getMonth(), 1);
lastday.setMonth(Date.today().getMonth() + 1, 0);
calendarmonth.setMonth(Date.today().getMonth());
calendarInit();
$('#calendar-prev').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(-1);
firstday.addMonths(-1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
$('#calendar-next').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(1);
firstday.addMonths(1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
addRemoveClickTrigger();
});
function calendarInit() {
CCheck = lastday.getDate() + firstday.getDay();
var i;
var colNo;
var a = 1;
var days = new Array();
$("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
}
/*alert(Date.today().getMonth());
alert(calendarmonth.getMonth());*/
if (Date.today().getMonth() == calendarmonth.getMonth() && Date.today().getFullYear() == calendarmonth.getFullYear()) {
for (i = 1; i <= lastday.getDate(); i++) //Date highlight
{
if (Date.today().getDate() == i) //highlight today's date
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("today");
} else if (Date.today().getDate() > i) //highlight unavailable dates
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
} else if (Date.today().getDate() < i) {
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
}
}
} else if (Date.today() > calendarmonth) {
for (i = 1; i <= lastday.getDate(); i++) //Highlight dates before today to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
} else {
for (i = 1; i <= lastday.getDate(); i++) //Condition highlighting
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
if (days[i].getDay() == 0 || days[i].getDay() == 6) // set weekends to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).removeClass("available");
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
}
}
addRemoveClickTrigger();
} //calendarInit()
function addRemoveClickTrigger()
{
$('.cal table tbody td').off();
$('.cal table tbody td').on({
'click':
function ()
{
alert(jQuery(this).prop('class'));
if ($(this).hasClass('available'))
{
alert('asd');
}
}
});
} //addRemoveClickTrigger()
I hope this helps.