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

时间：2019-04-13 06:33:26

标签： javascript appendchild

我正在为我的网站制作日历。如何将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附加到父级感到困惑。 现在，结果是这样的：link 感谢您的帮助！

2 个答案:

答案 0 :(得分：0)

您在此处生成无效的html，有时将TR插入TBODY的子级，有时直接插入TD。无论内部是否有一个单元格，都应始终在TR中换行。如果您不希望colspan占用多个单元格，请使用tutorialpoint.com属性。

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

TD
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;

答案 1 :(得分：0)

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

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

如以下屏幕截图所示

enter image description here

在您的else条件下的第二个更改您的代码

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>

希望这可以解决您的问题。

相关问题
最新问题