function refreshTable(){
        table.innerHTML="";  
        let html1=
                `<tr>
                <th>Task Name</th>
                <th>Owner</th>
                <th>Due Date</th>
                <th>Delete</th>
                <th>Edit</th>
                </tr>`;
        table.innerHTML += html1;    
        let counter=0;

        for(t of thingsToDo) {

            let row = table.insertRow(table.rows.length);
            row.id=t.name;

            //the id of the row is the task_name           
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(1);        
            let cell3 = row.insertCell(2);
            let cell4 = row.insertCell(3);
            let cell5 = row.insertCell(4);
                
            counter++;
            let cell1ID= "r"+counter+"c"+1;
            let cell4ID= "r"+counter+"c"+4;
            let cell5ID= "r"+counter+"c"+5; 
            
            let check_state = (t.isComplete==1) ? "checked" : "unchecked"; 
    
            cell1.innerHTML = "<td><input type=\"checkbox\" "+ check_state +" id=\""+ cell1ID +"\" class=\"checkbox\"> "+t.name+"</td>";
            cell2.innerHTML = t.owner.ownerName;
            cell3.innerHTML = t.toCompleteDate; 
            cell4.innerHTML ="<button type=\"button\" id=\""+ cell4ID +"\" class=\"btn btn-primary btn-xs dt-delete btnDelete\"><img class=\"imgDelte\" src=\"images\/iconfinder_cross_4115230.png\"></button>";
            cell5.innerHTML ="<button type=\"button\" id=\""+ cell5ID +"\" class=\"btn btn-primary btn-xs dt-edit btnEdit\"><img class=\"imgEdit\" src=\"images\/728966-20.png\"></button>";     
        
            //Cell of Delete Button
            $(("#"+cell4ID)).click(function(e){
                e.preventDefault();
                let indexCell;
                indexCell = $(cell4).closest("tr").index();                        
                let temp= table.rows[indexCell].id;            
    
                const modal = new Promise(function(resolve, reject){  
                    let txtContenet= "Are you sure you want to delete '"+temp+"'?";
    
                    if(($('#confirmation .modal-body'))!=null)
                        $('#confirmation .modal-body').empty();
    
                    let lblTemp = document.createElement("label");                    
                    lblTemp.innerHTML=txtContenet;
                    
                    let formTemp = document.createElement("form");                    
                    formTemp.appendChild(lblTemp);  
                    $("#confirmation").find(".modal-body").append(formTemp);
                    
                    $('#confirmation').modal('show');
    
                    $('#confirmation #delete1').click(function(){
                        resolve("user clicked");
                    });
                    $('#confirmation #cancel1').click(function(){
                        reject("user clicked cancel");
                    });
                    $(".modal").on("hidden.bs.modal", function(){
                        reject("user clicked cancel");
                    });                    
                }).then(function(val){
                        //val is your returned value. argument called with resolve.
                        if (indexCell > -1) {
                            let toDoId= thingsToDo[indexCell-1].toDoId;
                            $.ajax({
                                type: "POST",
                                url: 'api/deleteToDo.php',
                                data: {"toDoId": toDoId},
                                success: function(response)
                                {
                                    // console.warn(response);
                                    let jsonData= JSON.parse(response); 
                                    if(jsonData.success=="1")
                                    {  
                                        // dateTasks.splice(thingsToDo[indexOf(oldDate)],1);
                                        thingsToDo.splice(indexCell-1, 1);    
                                        
                                        dateTasks=[];
                                        for(let i=0;i<thingsToDo.length;i++)
                                            dateTasks.push(formatDate(thingsToDo[i].toCompleteDate));
                                        reload_Date_List();
                                        refreshTable();
                                    }
                                    else
                                    {
                                        alert("somthing went wrong");                
                                    }            
                                }
                            });
                        }                        
                }).catch(function(err){
                    //user clicked cancel when press 'exit button' OR 'Cancel Button' OR 'Outside the Modal'
                    console.log("In form delete", err);
                });                
             });               
            
            //Cell of Edit Button
            $(("#"+cell5ID)).click(function(){
                let indexCell;
                indexCell = $(cell5).closest("tr").index();   
                update_Task(indexCell);
            });
    
            //Cell of CheckBox + "tdDo"'s Name 
            $(("#"+cell1ID)).click(function(){
                let indexCell;
                indexCell = $(cell1).closest("tr").index();    
    
                //find the task in the array thingsToDo
                let taskTemp= thingsToDo[indexCell-1];               

                if(taskTemp.isComplete==1)
                    taskTemp.isComplete=0;            
                else 
                    taskTemp.isComplete=1;

                $.ajax({
                    type: "POST",
                    url: 'api/changeCompleteToDO.php',
                    data: {toDoId: taskTemp.toDoId, isComplete: taskTemp.isComplete}, 
                    success: function(response)
                    {    
                        // console.warn(response);                               
                        let jsonData= JSON.parse(response); 

                        if(jsonData.success===1)
                        {
                            // alert(bool);
                        }  
                    }        
                }); 
            });
        }  
    }
//Reload the Table by array 'thingsToDo' elements

Reload the Table by array 'thingsToDo' elements
Reload the Table by array ' thingsToDo ' elements
function refreshTable(){
        table.innerHTML="";  
        let html1=
                `<tr>
                <th>Task Name</th>
                <th>Owner</th>
                <th>Due Date</th>
                <th>Delete</th>
                <th>Edit</th>
                </tr>`;
        table.innerHTML += html1;    
        let counter=0;
        for(t of thingsToDo) {
            let row = table.insertRow(table.rows.length);
            row.id=t.name;
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(1);        
            let cell3 = row.insertCell(2);
            let cell4 = row.insertCell(3);
            let cell5 = row.insertCell(4);
            counter++;
            let cell1ID= "r"+counter+"c"+1;
            let cell4ID= "r"+counter+"c"+4;
            let cell5ID= "r"+counter+"c"+5; 
            let check_state = (t.isComplete==1) ? "checked" : "unchecked"; 
            cell1.innerHTML = "<td><input type=\"checkbox\" "+ check_state +" id=\""+ cell1ID +"\" class=\"checkbox\"> "+t.name+"</td>";
            cell2.innerHTML = t.owner.ownerName;
            cell3.innerHTML = t.toCompleteDate; 
            cell4.innerHTML ="<button type=\"button\" id=\""+ cell4ID +"\" class=\"btn btn-primary btn-xs dt-delete btnDelete\"><img class=\"imgDelte\" src=\"images\/iconfinder_cross_4115230.png\"></button>";
            cell5.innerHTML ="<button type=\"button\" id=\""+ cell5ID +"\" class=\"btn btn-primary btn-xs dt-edit btnEdit\"><img class=\"imgEdit\" src=\"images\/728966-20.png\"></button>";     
            $(("#"+cell4ID)).click(function(e){
                e.preventDefault();
                let indexCell;
                indexCell = $(cell4).closest("tr").index();                        
                let temp= table.rows[indexCell].id;            
                const modal = new Promise(function(resolve, reject){  
                    let txtContenet= "Are you sure you want to delete '"+temp+"'?";
                    if(($('#confirmation .modal-body'))!=null)
                        $('#confirmation .modal-body').empty();
                    let lblTemp = document.createElement("label");                    
                    lblTemp.innerHTML=txtContenet;
                    let formTemp = document.createElement("form");                    
                    formTemp.appendChild(lblTemp);  
                    $("#confirmation").find(".modal-body").append(formTemp);
                    $('#confirmation').modal('show');
                    $('#confirmation #delete1').click(function(){
                        resolve("user clicked");
                    });
                    $('#confirmation #cancel1').click(function(){
                        reject("user clicked cancel");
                    });
                    $(".modal").on("hidden.bs.modal", function(){
                        reject("user clicked cancel");
                    });                    
                }).then(function(val){
                        if (indexCell > -1) {
                            let toDoId= thingsToDo[indexCell-1].toDoId;
                            $.ajax({
                                type: "POST",
                                url: 'api/deleteToDo.php',
                                data: {"toDoId": toDoId},
                                success: function(response)
                                {
                                    let jsonData= JSON.parse(response); 
                                    if(jsonData.success=="1")
                                    {  
                                        thingsToDo.splice(indexCell-1, 1);    
                                        dateTasks=[];
                                        for(let i=0;i<thingsToDo.length;i++)
                                            dateTasks.push(formatDate(thingsToDo[i].toCompleteDate));
                                        reload_Date_List();
                                        refreshTable();
                                    }
                                    else
                                    {
                                        alert("somthing went wrong");                
                                    }            
                                }
                            });
                        }                        
                }).catch(function(err){
                    console.log("In form delete", err);
                });                
             });               
            $(("#"+cell5ID)).click(function(){
                let indexCell;
                indexCell = $(cell5).closest("tr").index();   
                update_Task(indexCell);
            });
            $(("#"+cell1ID)).click(function(){
                let indexCell;
                indexCell = $(cell1).closest("tr").index();    
                let taskTemp= thingsToDo[indexCell-1];               
                if(taskTemp.isComplete==1)
                    taskTemp.isComplete=0;            
                else 
                    taskTemp.isComplete=1;
                $.ajax({
                    type: "POST",
                    url: 'api/changeCompleteToDO.php',
                    data: {toDoId: taskTemp.toDoId, isComplete: taskTemp.isComplete}, 
                    success: function(response)
                    {    
                        let jsonData= JSON.parse(response); 
                        if(jsonData.success===1)
                        {
                        }  
                    }        
                }); 
            });
        }  
    }
function refreshTable ( ) { table . innerHTML = "" ; let html1 = ` ` ; table . innerHTML += html1 ; let counter = 0 ; for ( t of thingsToDo ) { let row = table . insertRow ( table . rows . length ) ; row . id = t . name ; let cell1 = row . insertCell ( 0 ) ; let cell2 = row . insertCell ( 1 ) ; let cell3 = row . insertCell ( 2 ) ; let cell4 = row . insertCell ( 3 ) ; let cell5 = row . insertCell ( 4 ) ; counter ++ ; let cell1ID = "r" + counter + "c" + 1 ; let cell4ID = "r" + counter + "c" + 4 ; let cell5ID = "r" + counter + "c" + 5 ; let check_state = ( t . isComplete == 1 ) ? "checked" : "unchecked" ; cell1 . innerHTML = "<td><input type=\"checkbox\" " + check_state + " id=\"" + cell1ID + "\" class=\"checkbox\"> " + t . name + "</td>" ; cell2 . innerHTML = t . owner . ownerName ; cell3 . innerHTML = t . toCompleteDate ; cell4 . innerHTML = "<button type=\"button\" id=\"" + cell4ID + "\" class=\"btn btn-primary btn-xs dt-delete btnDelete\"><img class=\"imgDelte\" src=\"images\/iconfinder_cross_4115230.png\"></button>" ; cell5 . innerHTML = "<button type=\"button\" id=\"" + cell5ID + "\" class=\"btn btn-primary btn-xs dt-edit btnEdit\"><img class=\"imgEdit\" src=\"images\/728966-20.png\"></button>" ; $ ( ( "#" + cell4ID ) ) . click ( function ( e ) { e . preventDefault ( ) ; let indexCell ; indexCell = $ ( cell4 ) . closest ( "tr" ) . index ( ) ; let temp = table . rows [ indexCell ] . id ; const modal = new Promise ( function ( resolve , reject ) { let txtContenet = "Are you sure you want to delete '" + temp + "'?" ; if ( ( $ ( '#confirmation .modal-body' ) ) != null ) $ ( '#confirmation .modal-body' ) . empty ( ) ; let lblTemp = document . createElement ( "label" ) ; lblTemp . innerHTML = txtContenet ; let formTemp = document . createElement ( "form" ) ; formTemp . appendChild ( lblTemp ) ; $ ( "#confirmation" ) . find ( ".modal-body" ) . append ( formTemp ) ; $ ( '#confirmation' ) . modal ( 'show' ) ; $ ( '#confirmation #delete1' ) . click ( function ( ) { resolve ( "user clicked" ) ; } ) ; $ ( '#confirmation #cancel1' ) . click ( function ( ) { reject ( "user clicked cancel" ) ; } ) ; $ ( ".modal" ) . on ( "hidden.bs.modal" , function ( ) { reject ( "user clicked cancel" ) ; } ) ; } ) . then ( function ( val ) { if ( indexCell > - 1 ) { let toDoId = thingsToDo [ indexCell - 1 ] . toDoId ; $ . ajax ( { type : "POST" , url : 'api/deleteToDo.php' , data : { "toDoId" : toDoId } , success : function ( response ) { let jsonData = JSON . parse ( response ) ; if ( jsonData . success == "1" ) { thingsToDo . splice ( indexCell - 1 , 1 ) ; dateTasks = [ ] ; for ( let i = 0 ; i < thingsToDo . length ; i ++ ) dateTasks . push ( formatDate ( thingsToDo [ i ] . toCompleteDate ) ) ; reload_Date_List ( ) ; refreshTable ( ) ; } else { alert ( "somthing went wrong" ) ; } } } ) ; } } ) . catch ( function ( err ) { console . log ( "In form delete" , err ) ; } ) ; } ) ; $ ( ( "#" + cell5ID ) ) . click ( function ( ) { let indexCell ; indexCell = $ ( cell5 ) . closest ( "tr" ) . index ( ) ; update_Task ( indexCell ) ; } ) ; $ ( ( "#" + cell1ID ) ) . click ( function ( ) { let indexCell ; indexCell = $ ( cell1 ) . closest ( "tr" ) . index ( ) ; let taskTemp = thingsToDo [ indexCell - 1 ] ; if ( taskTemp . isComplete == 1 ) taskTemp . isComplete = 0 ; else taskTemp . isComplete = 1 ; $ . ajax ( { type : "POST" , url : 'api/changeCompleteToDO.php' , data : { toDoId : taskTemp . toDoId , isComplete : taskTemp . isComplete } , success : function ( response ) { let jsonData = JSON . parse ( response ) ; if ( jsonData . success === 1 ) { } } } ) ; } ) ; } }
Reload the Table by array 'thingsToDo' elements
Reload the Table by array ' thingsToDo ' elements
//the id of the row is the task_name           
 //Cell of Delete Button
 //val is your returned value. argument called with resolve.
 // console.warn(response);
 // dateTasks.splice(thingsToDo[indexOf(oldDate)],1);
 //user clicked cancel when press 'exit button' OR 'Cancel Button' OR 'Outside the Modal'
 //Cell of Edit Button
 //Cell of CheckBox + "tdDo"'s Name 
 //find the task in the array thingsToDo
 // console.warn(response);                               
 // alert(bool);
