Table 复制而不是替换
Table duplicate instead of replace
我有这个 table，它是通过 JS 创建的，并且与 fullcalendar 相关联。
当我在我的日历中查看某个月份（例如：五月（Maggio 意大利语））时，我单击一个按钮，它显示 table，它显示5 月（31 天）：
但如果我更改月份（例如，我转到 6 月），就会发生这种情况：
它实际上打印了正确的 table，但它没有替换它（正如我想做的那样）而是添加在旧的
下
谁能帮我理解为什么会这样？
这是我的table代码：
function renderTable($targetTable, date, view, element ) {
var view = $('#calendar').fullCalendar('getView');
var start = view.intervalStart._d;
var end = view.intervalEnd.subtract(1, 'days');
//prende mese e anno attualmente visualizzati e lo imposta come titolo del modal nell'HTML
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
/*var d = new Date(start);
var n = months[d.getMonth()]; */
//calcola il numero dei giorni nel mese (30/31/28)
let numberOfDaysInMonth = new Date(end).getDate(); // just get the last day
//create the table header to display the month and date, and make is span all the days + the names column + the total column.
let $tableHeader = $(`<tr><th colspan="${numberOfDaysInMonth+2}" style="text-align: center;">${months[start.getMonth()]} ${start.getFullYear()}</th></tr>`)
//add header to our table
$targetTable.find('thead').append($tableHeader);
//Lets create a new empty table row to hold our heading and add our first column
let $header = $("<tr><td>Eventi</td>"); //this is using jQuery's method to create. anything starting $() is jQuery
//Build the header
//We're starting from 1 and counting up to the number of days
for(let i = 1; i <= numberOfDaysInMonth; i++) {
let $dayCell = $(`<td class="days" style="width: 10%;">${i}</td></tr>`); // create a day cell with our day of month number in it.
$header.append($dayCell); // Now we append our new day cell to our header.
}
//now add the Total cell.
$header.append($('<td id="tot">Totale</td>'));
//now our header is built, let's add it to our table....
$targetTable.find('tbody').append($header);
// now lets work on those columns....
//This iterates (loops) through each row. the `rowText` variable is updated to the next value from our array each time.
rowData.forEach(rowText => {
//Create a new row and set our text
let $row = $(`${rowText}`);
//now Javascript introduced a very nice string repeater we can use for our remaining cells.
//this basically copies the string 1 more, than the number of days, to cater for our Totale column
let $cells = $('<td id="hou" class="count"></td>'.repeat(numberOfDaysInMonth) + '<td class="totNum"></td>');
// add these new cells to our row.
$row.append($cells);
//add our new row to the table
$targetTable.find('tbody').append($row);
})
}
这是我在 JS 中调用 table 函数的地方：
var date = new Date();
renderTable($('#table2'), date);
如果调用empty();在目标 table 上，它将清除所有子元素。
function renderTable($targetTable, date, view, element ) {
// This line here
$targetTable.find('thead').empty();
$targetTable.find('tbody').empty();
var view = $('#calendar').fullCalendar('getView');
var start = view.intervalStart._d;
var end = view.intervalEnd.subtract(1, 'days');
//prende mese e anno attualmente visualizzati e lo imposta come titolo del modal nell'HTML
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
/*var d = new Date(start);
var n = months[d.getMonth()]; */
//calcola il numero dei giorni nel mese (30/31/28)
let numberOfDaysInMonth = new Date(end).getDate(); // just get the last day
//create the table header to display the month and date, and make is span all the days + the names column + the total column.
let $tableHeader = $(`<tr><th colspan="${numberOfDaysInMonth+2}" style="text-align: center;">${months[start.getMonth()]} ${start.getFullYear()}</th></tr>`)
//add header to our table
$targetTable.find('thead').append($tableHeader);
//Lets create a new empty table row to hold our heading and add our first column
let $header = $("<tr><td>Eventi</td>"); //this is using jQuery's method to create. anything starting $() is jQuery
//Build the header
//We're starting from 1 and counting up to the number of days
for(let i = 1; i <= numberOfDaysInMonth; i++) {
let $dayCell = $(`<td class="days" style="width: 10%;">${i}</td></tr>`); // create a day cell with our day of month number in it.
$header.append($dayCell); // Now we append our new day cell to our header.
}
//now add the Total cell.
$header.append($('<td id="tot">Totale</td>'));
//now our header is built, let's add it to our table....
$targetTable.find('tbody').append($header);
// now lets work on those columns....
//This iterates (loops) through each row. the `rowText` variable is updated to the next value from our array each time.
rowData.forEach(rowText => {
//Create a new row and set our text
let $row = $(`${rowText}`);
//now Javascript introduced a very nice string repeater we can use for our remaining cells.
//this basically copies the string 1 more, than the number of days, to cater for our Totale column
let $cells = $('<td id="hou" class="count"></td>'.repeat(numberOfDaysInMonth) + '<td class="totNum"></td>');
// add these new cells to our row.
$row.append($cells);
//add our new row to the table
$targetTable.find('tbody').append($row);
})
}
如果我理解正确的话，我认为这应该可以解决你的问题
我找到了解决方案
基本上我调用构建我的函数的地方 table 我添加了这个：
//table2 is the ID of my table
var table = document.getElementById('table2');
//i check if the table is empty; if it is than I render the thead and tbody
if (table.rows.length == 0){
var date = new Date();
renderTable($('#table2'), date);
}
//if not, before I delete whats inside and than I render it
else if(table.rows.lenght != 0){
$("#table2 thead").empty();
$("#table2 tbody").empty();
var date = new Date();
renderTable($('#table2'), date);
}
我有这个 table，它是通过 JS 创建的，并且与 fullcalendar 相关联。
当我在我的日历中查看某个月份（例如：五月（Maggio 意大利语））时，我单击一个按钮，它显示 table，它显示5 月（31 天）：
但如果我更改月份（例如，我转到 6 月），就会发生这种情况：
它实际上打印了正确的 table，但它没有替换它（正如我想做的那样）而是添加在旧的
下谁能帮我理解为什么会这样？
这是我的table代码：
function renderTable($targetTable, date, view, element ) {
var view = $('#calendar').fullCalendar('getView');
var start = view.intervalStart._d;
var end = view.intervalEnd.subtract(1, 'days');
//prende mese e anno attualmente visualizzati e lo imposta come titolo del modal nell'HTML
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
/*var d = new Date(start);
var n = months[d.getMonth()]; */
//calcola il numero dei giorni nel mese (30/31/28)
let numberOfDaysInMonth = new Date(end).getDate(); // just get the last day
//create the table header to display the month and date, and make is span all the days + the names column + the total column.
let $tableHeader = $(`<tr><th colspan="${numberOfDaysInMonth+2}" style="text-align: center;">${months[start.getMonth()]} ${start.getFullYear()}</th></tr>`)
//add header to our table
$targetTable.find('thead').append($tableHeader);
//Lets create a new empty table row to hold our heading and add our first column
let $header = $("<tr><td>Eventi</td>"); //this is using jQuery's method to create. anything starting $() is jQuery
//Build the header
//We're starting from 1 and counting up to the number of days
for(let i = 1; i <= numberOfDaysInMonth; i++) {
let $dayCell = $(`<td class="days" style="width: 10%;">${i}</td></tr>`); // create a day cell with our day of month number in it.
$header.append($dayCell); // Now we append our new day cell to our header.
}
//now add the Total cell.
$header.append($('<td id="tot">Totale</td>'));
//now our header is built, let's add it to our table....
$targetTable.find('tbody').append($header);
// now lets work on those columns....
//This iterates (loops) through each row. the `rowText` variable is updated to the next value from our array each time.
rowData.forEach(rowText => {
//Create a new row and set our text
let $row = $(`${rowText}`);
//now Javascript introduced a very nice string repeater we can use for our remaining cells.
//this basically copies the string 1 more, than the number of days, to cater for our Totale column
let $cells = $('<td id="hou" class="count"></td>'.repeat(numberOfDaysInMonth) + '<td class="totNum"></td>');
// add these new cells to our row.
$row.append($cells);
//add our new row to the table
$targetTable.find('tbody').append($row);
})
}
这是我在 JS 中调用 table 函数的地方：
var date = new Date();
renderTable($('#table2'), date);
如果调用empty();在目标 table 上，它将清除所有子元素。
function renderTable($targetTable, date, view, element ) {
// This line here
$targetTable.find('thead').empty();
$targetTable.find('tbody').empty();
var view = $('#calendar').fullCalendar('getView');
var start = view.intervalStart._d;
var end = view.intervalEnd.subtract(1, 'days');
//prende mese e anno attualmente visualizzati e lo imposta come titolo del modal nell'HTML
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
/*var d = new Date(start);
var n = months[d.getMonth()]; */
//calcola il numero dei giorni nel mese (30/31/28)
let numberOfDaysInMonth = new Date(end).getDate(); // just get the last day
//create the table header to display the month and date, and make is span all the days + the names column + the total column.
let $tableHeader = $(`<tr><th colspan="${numberOfDaysInMonth+2}" style="text-align: center;">${months[start.getMonth()]} ${start.getFullYear()}</th></tr>`)
//add header to our table
$targetTable.find('thead').append($tableHeader);
//Lets create a new empty table row to hold our heading and add our first column
let $header = $("<tr><td>Eventi</td>"); //this is using jQuery's method to create. anything starting $() is jQuery
//Build the header
//We're starting from 1 and counting up to the number of days
for(let i = 1; i <= numberOfDaysInMonth; i++) {
let $dayCell = $(`<td class="days" style="width: 10%;">${i}</td></tr>`); // create a day cell with our day of month number in it.
$header.append($dayCell); // Now we append our new day cell to our header.
}
//now add the Total cell.
$header.append($('<td id="tot">Totale</td>'));
//now our header is built, let's add it to our table....
$targetTable.find('tbody').append($header);
// now lets work on those columns....
//This iterates (loops) through each row. the `rowText` variable is updated to the next value from our array each time.
rowData.forEach(rowText => {
//Create a new row and set our text
let $row = $(`${rowText}`);
//now Javascript introduced a very nice string repeater we can use for our remaining cells.
//this basically copies the string 1 more, than the number of days, to cater for our Totale column
let $cells = $('<td id="hou" class="count"></td>'.repeat(numberOfDaysInMonth) + '<td class="totNum"></td>');
// add these new cells to our row.
$row.append($cells);
//add our new row to the table
$targetTable.find('tbody').append($row);
})
}
如果我理解正确的话，我认为这应该可以解决你的问题
我找到了解决方案
基本上我调用构建我的函数的地方 table 我添加了这个：
//table2 is the ID of my table
var table = document.getElementById('table2');
//i check if the table is empty; if it is than I render the thead and tbody
if (table.rows.length == 0){
var date = new Date();
renderTable($('#table2'), date);
}
//if not, before I delete whats inside and than I render it
else if(table.rows.lenght != 0){
$("#table2 thead").empty();
$("#table2 tbody").empty();
var date = new Date();
renderTable($('#table2'), date);
}