javascript - 使用 Javascript 将类添加到动态行

Question

我正在使用一个脚本向我的表单表中添加一行，该行绝对可以正常工作。在我的第一个输入框中，我使用的是在第一行工作的日期选择器，但是当我添加另一行时，日期选择器无法正常工作。我假设这是因为没有类(class)。我尝试使用这段代码添加但没有成功: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>