Dynamically display table

Admin 1
Viewed 82

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

enter image description here

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?

Also maybe change isn't the right thing because it will not load first time because the combobox didn't change.

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>
html-table javascript
1 Answers

Well, not a complete answer, but for your question about change event, try alter your code to smth like this. This way you can trigger the method for the first time

$(document).ready(function() {
   $('#dates').change(datesChanged);
   datesChanged();
}

function datesChanged() {
   var splitDate = $('#dates').val().split("/"),
      month = splitDate[0],
      year = splitDate[1],
      days = daysInMonth(month,year);
   console.log("days:", days);
}

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

For the dynamic build, you can use the datatables library, it is simple and fast. Basic principal is that you just give it an object and it parses it to html table

user_21494920
Related