Как добавить несколько TD в несколько TR в Javascript через appendChild? - PullRequest
Новая
       25

Как добавить несколько TD в несколько TR в Javascript через appendChild?

1 голос
/ 13 апреля 2019

Я делаю календарь для своего сайта.Как я могу добавить 7 тд (7 дней в неделю) к 1 тр (неделя), а затем зациклить его несколько раз, пока данные не закончатся?

Я пробовал этот код 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>
но запутался в том, как добавить tr к родителю для каждого 7 цикла.на данный момент результат таков: ссылка Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

В вашем коде есть незначительные ошибки,

сначала вы не добавляете свои тд в свои tr

, как показано на скриншоте ниже

enter image description here

2-й в вашем другом состоянии изменить код с 

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>

надеюсь, что это решит вашу проблему.

0 голосов
/ 13 апреля 2019

Вы создаете недопустимый 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>
...