Home > Back-end >  Table duplicate instead of replace
Table duplicate instead of replace

Time:04-12

I have this table, created throught JS, and it's connected with fullcalendar. When I'm viewing a certain month (for example: May (Maggio in italian)) in my calendar and I click on a button it show this table, where it shows May (with 31 days): modal

But if I change month (for example, I go to June), this happens: duplicate

It actually print the correct table, but instead of replacing it (as I would like to do) it added under the old one

Can someone help me understand why it did this?

This is my table code:

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  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" ></td>'.repeat(numberOfDaysInMonth)   '<td ></td>'); 
     
        // add these new cells to our row.
        $row.append($cells);
      
      //add our new row to the table
      $targetTable.find('tbody').append($row);      
    })      
}

This is where I call my table function in JS:

var date = new Date();
renderTable($('#table2'), date);

CodePudding user response:

If you call empty(); on the target table it will clear all it's child elements.

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  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" ></td>'.repeat(numberOfDaysInMonth)   '<td ></td>'); 
     
        // add these new cells to our row.
        $row.append($cells);
      
      //add our new row to the table
      $targetTable.find('tbody').append($row);      
    })      
}

I think this should solve your issue if I understood you question correctly

CodePudding user response:

I found the solution

Basically where i call the function that build my table I added this:

//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);
}
  • Related