將類添加到使用Javascript的動態行中

Question

我正在使用腳本將行添加到我的表單表中，該表正在運行可靠。在我的第一個輸入框中，我使用的日期選擇器在第一行上工作，但是當我添加另一行時，datepicker isnet正在工作。我假設這是因爲沒有課。我曾嘗試使用的代碼，但沒有運氣此位加法：newcell.className = 'datepicker';

function addRow(tableID) { 
    var table = document.getElementById(tableID).getElementsByTagName('tbody')[0]; 
    var rowCount = table.rows.length; 
    if(rowCount < 50){       // limit the user from creating fields more than your limits 
     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; 
      newcell.className = 'datepicker'; 
     } 
    }else{ 
     alert("Too many rows."); 

    } 
} 

Answer 1

您需要的元素其實create the datepicker，在for循環體的結束。另外，不要複製原始行的innerHTML，同樣也會複製輸入的id，該輸入必須是唯一的，並且會打破日期選擇器邏輯。

一個完整的工作示例如下。

function addRow(tableID) { 
 
    var table = document.getElementById(tableID).getElementsByTagName('tbody')[0]; 
 
    var rowCount = table.rows.length; 
 
    if(rowCount < 50){       // limit the user from creating fields more than your limits 
 
     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.appendChild(document.createElement('input')); 
 
      
 
      $(newcell).find('input').addClass('datepicker'); 
 
      $(newcell).find('input.datepicker').datepicker(); 
 
     } 
 
    }else{ 
 
     alert("Too many rows."); 
 

 
    } 
 
} 
 

 
$(function() { 
 
    $('.datepicker').datepicker(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> 
 

 
<button onclick="addRow('table')">Add Row</button> 
 

 
<table id="table"> 
 
    <tbody> 
 
    <tr> 
 
     <td><input class="datepicker" /></td> 
 
    </tr> 
 
    </tbody> 
 
</table>