如何通过appendChild在Javascript中将多个td附加到多个tr中?

问题描述 投票:1回答:2

我正在为我的网站制作日历。我怎样才能将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>
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!
javascript appendchild
2个回答
0
投票

您的代码中存在一些小错误,

首先,你没有将你的td附加到你的tr中,

如下面的截图所示

enter image description here

在你的其他情况下,第二个改变你的代码

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

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

并最后使用i = 0初始化你的循环,当分配我的值时,我喜欢这个 - > 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>

希望这能解决你的问题。


0
投票

你在那里生成无效的HTML,有时插入TR作为TBODY的孩子,有时直接TD。你应该总是在TR中包装一行,无论它是否只有一个单元格或多个单元格。如果你不想占用多个单元格,请在colspan上使用TD属性。

最好先将整个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>
© www.soinside.com 2019 - 2024. All rights reserved.