如何通过appendChild在Java中的多个tr中附加多个td？

Question

我正在为我的网站制作日历。 如何将7 td（每周7天）附加到1 tr（周），然后循环几次直到数据完成？

我已经尝试过此javascript代码

 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 = "&nbsp;"; // 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div> </div> </div> </td> <tr> </tbody> </table> 

但是对于如何每7个循环将tr附加到父级感到困惑。 现在，结果是这样的： 链接感谢您的帮助！

Answer 1

您在此处生成无效的html，有时将TR作为TBODY的子代，有时直接作为TD 。 无论TR中只有一个单元格还是很多单元格，都应始终在TR包装一行。 如果不希望它占用多个单元格，请在TD上使用colspan属性。

也最好先将整个html生成为字符串，然后立即将其插入DOM。 这样会更快更干净。

 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; } } var html = ''; var tr = ''; for (var i = 1; i <= getLastDateName; i++) { var tdId = getLastYearName+"-"+getLastMonName+"-"+getLastDateName; var td = '<div class="fc-wrapper-inner"><div class="fc-day-number">'+i+'<div class="fc-day-content"><div class="fc-day-inner">&nbsp;</div></div></div>'; tr += '<td id="'+tdId+'" class="fc-day" style="padding:13px">'+td+'</td>'; if (i%7==0) { html += '<tr class="fc-week">'+tr+'</tr>'; tr = ''; } } html += '<tr class="fc-week">'+tr+'</tr>'; document.getElementById('date-start').innerHTML = html; 

 <table id="date-start"> </table> 

Answer 2

您的代码中有一些小错误，

首先，您没有将td附加在tr的后面，

如以下屏幕截图所示

您其他条件中的第二个将您的代码从

document.getElementById("date-start").appendChild(DOMfcDay);

至

document.getElementById("date-start").children[document.getElementById("date-start").children.length - 1].appendChild(DOMfcDay);

最后使用i = 0初始化循环，并在分配i的值时执行如下操作-> DOMfcDayNumber.innerHTML = i + 1; 并检查您的状况，例如(i%7==0) ，

以下是完整的示例

 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 = "&nbsp;"; // 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div> </div> </div> </td> <tr> </tbody> </table> 

希望这能解决您的问题。