如何通过appendChild在Javascript的多个tr中追加多个td？
How to append multiple td in multiple tr in Javascript through 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 = " ";
// 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>
但对如何为每 7 个循环将 tr 附加到父级感到困惑。
现在，结果是这样的：link
感谢您的帮助！
您在那里生成无效的 html，有时插入 TR 作为 TBODY 的子项，有时直接插入 TD。你应该总是在 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"> </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>
您的代码中有一些小错误，
首先你没有在你的 tr 中附加你的 td，
如下图所示
第 2 个在你的 else 条件下改变你的代码
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 = " ";
// 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>
希望这能解决您的问题。
我正在为我的网站制作日历。我如何将 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 = " ";
// 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>
您在那里生成无效的 html，有时插入 TR 作为 TBODY 的子项，有时直接插入 TD。你应该总是在 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"> </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>
您的代码中有一些小错误，
首先你没有在你的 tr 中附加你的 td，
如下图所示
第 2 个在你的 else 条件下改变你的代码
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 = " ";
// 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>
希望这能解决您的问题。