动态显示表格

时间:2017-10-06 09:37:10

标签: javascript html-table

我正在尝试制作某种“时间表”,用户输入2个日期

enter image description here

并计算每月/每年,并显示在combobox

我想动态(无需刷新页面或任何内容)更新天数,并使用Day NumberDay Name(monday,etc..)填充表格

我设法计算了一个月内的天数但是如何在不重新加载页面的情况下显示我的表格?

也许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>

1 个答案:

答案 0 :(得分:0)

嗯,不是一个完整的答案,但是关于更改事件的问题,请尝试将代码更改为像这样。这样您就可以第一次触发该方法

$(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();
}

对于动态构建,您可以使用datatables库,它简单快捷。基本原则是你只需给它一个对象并将其解析为html表