2017-10-06 5 views
2

私は、ユーザ入力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> 

答えて

0

まあ、ない完全な答えはなく、変更イベントに関するご質問には、次のようになめらかにコードを変更してみてください。この方法は、あなたがdatatablesライブラリを使用することができ、初めての動的ビルドの

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

するための方法をトリガすることができ、それは、シンプルで早いのが特長です。基本的なプリンシパルは、それにオブジェクトを与え、それをhtmlテーブルに構文解析することです。

関連する問題