Table with Days and Name of Days

Question

I'm trying to make some sort of "timesheet" where the user inputs 2 dates

and it calculates each month/year and display on a combobox.

I wanted to DYNAMICALLY(no need to refresh the page or anything) update the amount of days and fill the table with Day Number and Day Name(monday,etc..)

I managed to calculate the amount of days in a month but how can I display my table without reload the page?

Maybe I should use JSON arrays with Ajax? But how do I achive this?

JavaScript

$(document).ready(function() {
$('#dates').change(function() {
    var splitDate = $('#dates').val().split("/");
    var month = splitDate[0];
    var year = splitDate[1];
    var days = daysInMonth(month,year);
    alert(days);
});

function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

});

HTML

<div class="row" style="margin-top: 30px;">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th class="text-center">Day</th>
                        <th class="text-center">Number of Clients</th>
                        <th class="text-center"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="text-center">
                        <td></td>
                        <td></td>
                        <td><input name="amountOfClients[]" type="number"></td>
                        <td>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

score 0 · Accepted Answer · answered Oct 06 '17 at 14:05

You want remove all current rows from table and insert new rows?

if YES then try following steps:

1)Assign id to tbody (tbodyid)

2) Call function (called new_data()) in change event of date.

3) In that function first remove all current row $("#tbodyid").empty();

4)Use loop and create for table which you want to add in variable

( Depend your data use loop or add each row separately)

var new_rows="";
// data 
var count=Object.keys(data).length;
for(i=0; i< count ; i++)
{
   new_rows=new_rows+"<tr>"
                   +" <td>"+i+"</td>"
                   +" <td>"+data['day']+"</td>"
                      +"  <td><input name='amountOfClients[]' type='number'>"+data['noOfClient']+"</td>"
                       +" <td> </td>"; 
}

5) Append new rows to tbody id by

$("#tbodyid").append(new_rows);

I dont need ajax for this? But I will need to refresh the page right? I dont really need to delete the rows But for example if the month has 31 days and the next one has 30 days I will need to clear 1 row. — , Oct 06 '17 at 14:23

Table with Days and Name of Days

1 Answers1