javascript - js创建标签 - 原生js添加元素




无法通过名称引用动态创建的元素 (2)

得到它了!!

问题是,当Jquery的插件datepicker被应用到一个元素,一个类被设置为hasDatepicker输入。

再次调用插件时,首先检查类是否已经存在...如果是这样,比Jquery不应用datepicker,因为它知道它已经被应用。

由于您是从预先存在的单元格复制innerHTML

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

您正在复制hasDatepicker类已经设置的输入。 所以jquery不会实现这个插件。

一个简单的解决方法是在datepicker调用之前删除类:

var setClass = function() {
    $('[name="when"]').removeClass("hasDatepicker").datepicker();
}

更新的FIDDLE

当页面被创建时,我有一行表格:

<TD><INPUT type="text" name="when"/></TD>

所以当用户点击这个元素时,一个日期选择器显示:

$(document).ready(function() {
    $('[name="when"]').datepicker();
});

当用户添加一个新的行到这个表,然后我调用setClass函数来设置新行(所有行):

function setClass() {
    $('[name="when"]').datepicker();
}

但是这不适用于这些动态创建的行。 为什么?

这是我如何添加行:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[1].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;


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

您应该只是在新添加的元素上初始化插件。 不过,你需要采取一些特殊的行动。

hasDatepicker插件将hasDatepicker类放在已经初始化的元素上,而不是重新初始化它们。 由于您正在复制具有此类的元素,因此您需要将其删除,以便将其重新初始化。 其次,如果元素没有ID,datepicker会为其添加一个随机ID。 ID必须是唯一的,但是您的代码正在复制该ID。 在我的代码中,我只是从元素中删除ID,所以插件将添加一个新的,唯一的。 如果我没有这样做,新行上的日期选择器将填充第一行(因为在从datepicker中选择某些内容时,当找到要更新的输入时,它会在内部使用该ID)。

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[01].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;


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

function setClass(newrow) {
    $(newrow).find('.hasDatepicker').removeAttr('id').removeClass('hasDatepicker').datepicker();
}

DEMO





jquery-plugins