Question

当我将datepicker添加到我添加的行时。但是日期选择器不起作用。但它只适用于第一个tr。当我删除第一个tr datepicker剩余添加行日期选择器工作

请参阅以下代码。

$(function() {
    $( ".datepicker" ).datepicker({

         defaultDate: "+1w",
         changeMonth: true,
         maxDate: new Date(), 
         dateFormat: 'yy-mm-dd',
         numberOfMonths: 1,

    });  });

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;
            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 $row = $(row);
        $row.find('input.datepicker').datepicker({
             maxDate: new Date(), 
             dateFormat: 'yy-mm-dd',
        });

    }

以上js的html代码

`

<input type="button" class="btn btn-default" value="Add Row" onClick="addRow('add_row')"/>
 <table class="table table-bordered" id="adddeleterow">

                                <tbody id="add_row">
                                <tr>
                                <td><input class="form-control datepicker" type="text" name="date[]" id="date" placeholder="Date"/>
                                    </td>
                                    <td>
                                        <input class="form-control" type="text" name="hours[]" id="hours" placeholder="hours(hh:mm)"/>
                                    </td>
                                    <td><input type="button" class="btn btn-default" id="delPOIbutton" value="Delete" onClick="delete_check('add_row',this)" /></td>
                                    </tr>
                                </tbody>
                            </table>

`

Answer 1

问题出在第二行。

你拥有的是：

$( ".datepicker" ).datepicker({

应该是这样的。

$(function() {
$(".datepicker").datepicker()({

  defaultDate: "+1w",
  changeMonth: true,
  maxDate: new Date(),
  dateFormat: 'yy-mm-dd',
  numberOfMonths: 1,

}); });

此外，您需要将click事件绑定到addRow并将新行移动到dom中。

$(".datepick").datepicker();
var newRowNum = 0;

// bind a click event to the "Add" link
$('#addnew').click(function() {

$(".datepick").datepicker("destroy");

您可以在此处查看更多内容。 http://jsfiddle.net/norcaljohnny/hq2r9Lbq/

当我点击添加行按钮添加行但jquery datepicker无法正常工作

1 个答案: