Question

我有一个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;
            }

我想在每一行中使用一个datepicker（或更多）。来自这里的Datepicker： http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6

我需要为每个datepicker提供以下脚本：

<script>
datePickerController.createDatePicker({ 
// Associate the text input to a DD/MM/YYYY date format                            
formElements:{"formInputName":"%Y-%m-%d"}
}); 
</script>

如何为添加的每个表行轻松执行此脚本？我知道在innerHTML中使用不起作用。请参阅附图，了解所需的结果。

感谢您的帮助！

Answer 1

您可以为您创建的每个输入创建ID，也可以使用类来显示哪个输入应该使用日期选择器......

这里的工作演示 - ＆gt; 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
            });
        }
    }
}

Answer 2

您应该能够在字段名称上使用_date等前缀或后缀。然后在分配datepicker时循环它。像这样：

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

具有多个日期选择器的动态表

2 个答案: