javascriptappendchild
but confused about how to append tr to the parent for every 7 loop.
for now, the outcome is like this: link
Thanks for any help!
How to append multiple td in multiple tr in Javascript through appendChild?
I'm making a calendar for my website. How can i append 7 td (7day each week) to 1 tr (week), then loop it for several times until the data finished?
I have tried this javascript codes
var date = new Date(2019, 3, 1), y = date.getFullYear(), m = date.getMonth();
var firstDay = new Date(y, m, 1);
var lastDay = new Date(y, m + 1, 0);
var arrDayName = ['sun','mon','tue','wed','thu','fri','sat'];
var arrMonthName = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
var arrIndoMonthName = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
var getFirstDayName = firstDay.toString().split(" ")[0].toLowerCase();
var getFirstMonName = firstDay.toString().split(" ")[1].toLowerCase();
var getFirstDateName = parseInt(firstDay.toString().split(" ")[2].toLowerCase());
var getFirstYearName = parseInt(firstDay.toString().split(" ")[3].toLowerCase());
var getLastDayName = lastDay.toString().split(" ")[0].toLowerCase();
var getLastMonName = lastDay.toString().split(" ")[1].toLowerCase();
var getLastDateName = parseInt(lastDay.toString().split(" ")[2].toLowerCase());
var getLastYearName = parseInt(lastDay.toString().split(" ")[3].toLowerCase());
// get first status
var firstStatus = '';
for (var i = 0; i < getLastDateName.length; i++) {
if (arrDayName[i] == getFirstDayName) {
firstStatus = i;
}
}
// ------------------------------1. load older month
// ------------------------------2. load current month
for (var i = 1; i <= getLastDateName; i++) {
// 1. fc day number
var DOMfcDayNumber = document.createElement("div");
DOMfcDayNumber.className = "fc-day-number";
DOMfcDayNumber.innerHTML = i;
// 2. fc-day-content inner
var DOMfcDayContentInner = document.createElement("div");
DOMfcDayContentInner.className = "fc-day-inner";
DOMfcDayContentInner.innerHTML = " ";
// 3. fc-day-content wrapper 2
var DOMfcDayContentWrapper = document.createElement("div");
DOMfcDayContentWrapper.className = "fc-day-content";
DOMfcDayContentWrapper.appendChild(DOMfcDayContentInner);
// 4. fc-wrapper-inner wrapper 1 & 3
var DOMwrpInnerContentInner = document.createElement("div");
DOMwrpInnerContentInner.className = "fc-wrapper-inner";
DOMwrpInnerContentInner.appendChild(DOMfcDayNumber);
DOMwrpInnerContentInner.appendChild(DOMfcDayContentWrapper);
// 5. fc-day wrapper 4
var DOMfcDay = document.createElement("td");
DOMfcDay.className = "fc-day";
DOMfcDay.style.cssText = "padding:13px";
DOMfcDay.appendChild(DOMwrpInnerContentInner);
DOMfcDay.id = getLastYearName+"-"+getLastMonName+"-"+getLastDateName;
if (i%8==0) {
// 6. fc-week wrapper 5 <tr class="fc-week">
var DOMfcWeek = document.createElement("tr");
DOMfcWeek.className = "fc-week";
DOMfcWeek.appendChild(DOMfcDay);
document.getElementById("date-start").appendChild(DOMfcWeek);
}else{
document.getElementById("date-start").appendChild(DOMfcDay);
}
}<table>
<tbody id="date-start">
<tr class="fc-week-01">
<td class="fc-day" id="2019-04-1">
<div class="fc-wrapper-inner">
<div class="fc-day-number">1</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<td class="fc-day" id="2019-04-2">
<div class="fc-wrapper-inner">
<div class="fc-day-number">2</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<tr>
<tr class="fc-week-02">
<td class="fc-day" id="2019-04-8">
<div class="fc-wrapper-inner">
<div class="fc-day-number">8</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<td class="fc-day" id="2019-04-9">
<div class="fc-wrapper-inner">
<div class="fc-day-number">9</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<tr>
</tbody>
</table>Solution
There are some minor mistakes in your code,
first you are not appending your td's in your tr's,
as seen in the below screenshot
2nd in your else condition change your code from
document.getElementById("date-start").appendChild(DOMfcDay);
to
document.getElementById("date-start").children[document.getElementById("date-start").children.length - 1].appendChild(DOMfcDay);
and lastly initialize your loop with i = 0 and when assign the value of i do like this -> DOMfcDayNumber.innerHTML = i + 1; and check your condition like (i%7==0),
below is the full example
var date = new Date(2019, 3, 1), y = date.getFullYear(), m = date.getMonth();
var firstDay = new Date(y, m, 1);
var lastDay = new Date(y, m + 1, 0);
var arrDayName = ['sun','mon','tue','wed','thu','fri','sat'];
var arrMonthName = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
var arrIndoMonthName = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
var getFirstDayName = firstDay.toString().split(" ")[0].toLowerCase();
var getFirstMonName = firstDay.toString().split(" ")[1].toLowerCase();
var getFirstDateName = parseInt(firstDay.toString().split(" ")[2].toLowerCase());
var getFirstYearName = parseInt(firstDay.toString().split(" ")[3].toLowerCase());
var getLastDayName = lastDay.toString().split(" ")[0].toLowerCase();
var getLastMonName = lastDay.toString().split(" ")[1].toLowerCase();
var getLastDateName = parseInt(lastDay.toString().split(" ")[2].toLowerCase());
var getLastYearName = parseInt(lastDay.toString().split(" ")[3].toLowerCase());
// get first status
var firstStatus = '';
for (var i = 0; i < getLastDateName.length; i++) {
if (arrDayName[i] == getFirstDayName) {
firstStatus = i;
}
}
// ------------------------------1. load older month
// ------------------------------2. load current month
for (var i = 0; i <= getLastDateName; i++) {
// 1. fc day number
var DOMfcDayNumber = document.createElement("div");
DOMfcDayNumber.className = "fc-day-number";
DOMfcDayNumber.innerHTML = i + 1;
// 2. fc-day-content inner
var DOMfcDayContentInner = document.createElement("div");
DOMfcDayContentInner.className = "fc-day-inner";
DOMfcDayContentInner.innerHTML = " ";
// 3. fc-day-content wrapper 2
var DOMfcDayContentWrapper = document.createElement("div");
DOMfcDayContentWrapper.className = "fc-day-content";
DOMfcDayContentWrapper.appendChild(DOMfcDayContentInner);
// 4. fc-wrapper-inner wrapper 1 & 3
var DOMwrpInnerContentInner = document.createElement("div");
DOMwrpInnerContentInner.className = "fc-wrapper-inner";
DOMwrpInnerContentInner.appendChild(DOMfcDayNumber);
DOMwrpInnerContentInner.appendChild(DOMfcDayContentWrapper);
// 5. fc-day wrapper 4
var DOMfcDay = document.createElement("td");
DOMfcDay.className = "fc-day";
DOMfcDay.style.cssText = "padding:13px";
DOMfcDay.appendChild(DOMwrpInnerContentInner);
DOMfcDay.id = getLastYearName+"-"+getLastMonName+"-"+getLastDateName;
if (i%7==0) {
// 6. fc-week wrapper 5 <tr class="fc-week">
var DOMfcWeek = document.createElement("tr");
DOMfcWeek.className = "fc-week";
DOMfcWeek.appendChild(DOMfcDay);
document.getElementById("date-start").appendChild(DOMfcWeek);
}else{
document.getElementById("date-start").children[document.getElementById("date-start").children.length - 1].appendChild(DOMfcDay);
}
}<table>
<tbody id="date-start">
<tr class="fc-week-01">
<td class="fc-day" id="2019-04-1">
<div class="fc-wrapper-inner">
<div class="fc-day-number">1</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<td class="fc-day" id="2019-04-2">
<div class="fc-wrapper-inner">
<div class="fc-day-number">2</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<tr>
<tr class="fc-week-02">
<td class="fc-day" id="2019-04-8">
<div class="fc-wrapper-inner">
<div class="fc-day-number">8</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<td class="fc-day" id="2019-04-9">
<div class="fc-wrapper-inner">
<div class="fc-day-number">9</div>
<div class="fc-day-content">
<div class="fc-day-inner"> </div>
</div>
</div>
</td>
<tr>
</tbody>
</table>hope this solves your problem.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices