Question

我正在使用脚本向表格表中添加一行，该表格工作正常。在我的第一个输入框中，我使用的是一个正在处理第一行的datepicker，但是当我添加另一行时，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

你需要在for-loop体的末尾对元素实际create the datepicker。另外，不要复制原始行的innerHTML，也要复制输入的id，这必须是唯一的，并且会破坏日期选择器逻辑。

下面是一个完整的工作示例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用Javascript将类添加到动态行

1 个答案: