具有多個日期選擇器的動態表

我有一個使用重複行具有動態表的Web表單。新行，並調用下面的addRow功能補充說：具有多個日期選擇器的動態表

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中使用不起作用。請參閱附件圖像以獲得所需結果。

感謝您的幫助！

來源

2011-12-19 Tezzums

這將是非常困難的（並非不可能），爲你做..因爲在你創建表的方式 - 從以前的列採取的innerHTML，然後根據，創建一個新的行一個....你真的需要爲每個將使用datepicker的輸入創建唯一的ID - 然後你可以調用createDatePicker方法 - 傳遞你創建的新輸入的forminputname .... – ManseUK 2011-12-19 17:26:12

我知道每個輸入的唯一ID和名稱的必要性。我將用數組或計數器變量來實現。我只是提供一個基本的框架，以便有人能幫助我開始。感謝您的答覆！ – Tezzums 2011-12-20 10:11:29

您可以創建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 
      }); 
     } 
    } 
}

來源

2011-12-19 17:56:01 ManseUK

ManseUK，太棒了。這正是我所期待的，讓我開始。我會記住這一點。您的幫助和演示非常感謝！ – Tezzums 2011-12-20 10:15:34

@Tezzums沒有probs ...不理想，但工作沒有關係複製上面的單元格，因爲它複製一切...甚至已經創建的日期選擇器... – ManseUK 2011-12-20 10:19:42

@Tezzums如果我這樣做..我會[從頭創建]（https://developer.mozilla.org/en/DOM/document.createElement）而不是複製上一行 - 但那只是我:-) – ManseUK 2011-12-20 12:25:40

您應該可以在字段名稱上使用_date等前綴或後綴。然後在分配日期選擇器時循環。事情是這樣的：

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

來源

2011-12-19 17:54:05 aknatn

具有多個日期選擇器的動態表

回答

相關問題