複数の日付ピッカーを持つ動的テーブル

Question

私は、繰返し行を使用して動的な表を持つWebフォームを持っています。新しい行は以下のAddRow関数を呼び出すことによって追加された：私は、各行に1つの日付ピッカー（またはそれ以上）たい

function addRow(tableID) { 

     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 


      var newcell = row.insertCell(i); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
      } 

。ここから日付ピッカー： http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6

私は、各日付ピッカーのために次のスクリプトが必要になります。

<script> 
datePickerController.createDatePicker({ 
// Associate the text input to a DD/MM/YYYY date format        
formElements:{"formInputName":"%Y-%m-%d"} 
}); 
</script> 

どのように私は簡単に追加された各テーブル行のために、このスクリプトを実行することができますか？ innerHTMLでの使用はうまくいきません。希望の結果については添付の画像をご覧ください。あなたの助けのための

ありがとう！

Answer 1

あなたは

がここにデモ作業...あなたが作成しても、日付ピッカーを使用すべき入力を示すためにクラスを使用し、入力ごとにidを作成することができます - >http://jsfiddle.net/S8Vky/3/

例：

HTML

<table id="mytable"> 
    <tr> 
     <td><input class="text" type="text" id="row-0-0" value=""/></td> 
     <td><input class="cal" type="text" id="row-0-1" value=""/></td> 
     <td><input class="cal" type="text" id="row-0-2" value=""/></td> 
    </tr> 
</table> 
<input type="button" onclick="addRow('mytable')" value="Add Row"/> 

JavaScript

function addRow(tableID) { 

    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for (var i = 0; i < colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     //alert(newcell.childNodes); 
     switch (newcell.childNodes[0].type) { 
     case "text": 
      newcell.childNodes[0].value = ""; 
      break; 
     case "checkbox": 
      newcell.childNodes[0].checked = false; 
      break; 
     case "select-one": 
      newcell.childNodes[0].selectedIndex = 0; 
      break; 
     } 

     var newrowid = "row-" + rowCount + "-" + i; 
     newcell.childNodes[0].id = newrowid; 
     var obj = {}; 
     obj[newrowid] = "%d/%m/%Y"; 
     if (newcell.childNodes[0].className == 'cal') { 
      datePickerController.createDatePicker({ 
       formElements: obj 
      }); 
     } 
    } 
} 

Answer 2

フィールド名に_dateのような接頭辞または接尾辞を使用できるようにする必要があります。次に、日付ピッカーを割り当てるときにループします。このような何か：

$("input[id$='_date']").each(function(){ 
    $(this).datepicker(); 
});