Question

这里我试图将datepicker添加到新添加的行中，但同样没有反映。尝试使用clone（true）函数但没有帮助。

以下代码显示了四列，第一列是日期字段。必须将日期选择器复制到新添加的行中。

$<html lang="en">
        <head>
          <meta charset="utf-8">
          <title>Expenses</title>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
          <script src="//code.jquery.com/jquery-1.10.2.js"></script>
          <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script>
          $(function() {
            $( "#datepicker" ).datepicker();

          });
          function addRow(tableID) 
          {

                  var table = document.getElementById(tableID);

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

                  var cell1 = row.insertCell(0);
                  var expense_date = document.createElement("input");
                  expense_date.type = "text";
                  expense_date.name = "expenses[" + counts + "].expense_date";
                  cell1.appendChild(expense_date);

                  var cell2 = row.insertCell(1);
                  var expense_against = document.createElement("input");
                  expense_against.type = "text";
                  expense_against.name = "expenses[" + counts + "].expense_against";
                  cell2.appendChild(expense_against);

                  var cell3 = row.insertCell(2);
                  var amount = document.createElement("input");
                  amount.type = "text";
                  amount.name = "expenses[" + counts + "].amount";
                  cell3.appendChild(amount);

                  var cell4 = row.insertCell(3);
                  var paid_by = document.createElement("input");
                  paid_by.type = "text";
                  paid_by.name = "expenses[" + counts + "].paid_by";
                  cell4.appendChild(paid_by);

          }
          </script>
        </head>
        <body>
         <form action="submit" method="post">

        <p align ="center"><font size = "6" face = "Cursive">Expenses</font></p>

        <TABLE id="expensesTable" border="2" style="width:39%" align="center">
                <TR>
                        <TD align = "center"><font size = "4" face = "Cursive">EXPENSE_DATE</font></TD>
                        <TD align = "center"><font size = "4" face = "Cursive">EXPENSE_AGAINST</font></TD>
                        <TD align = "center"><font size = "4" face = "Cursive">AMOUNT</font></TD>
                        <TD align = "center"><font size = "4" face = "Cursive">PAID_BY</font></TD>
                </TR>
                <TR>
                        <TD><INPUT type="text" id="datepicker" name="expenses[0].expense_date" /></TD>
                        <TD><INPUT type="text" name="expenses[0].expense_against" /></TD>
                        <TD><INPUT type="text" name="expenses[0].amount" /></TD>
                        <TD><INPUT type="text" name="expenses[0].paid_by" /></TD>

                </TR>
        </TABLE> 

        </div>
        <p align ="center">
        <INPUT type="button" value="Add More" name="expenses[0].more" onclick="addRow('expensesTable')" />
        <input type="submit" value="SUBMIT" />
        </p>
        </form>



        </body>
        </html>

Answer 1

您需要做的是在将行添加到页面后调用datepicker()。这意味着每次添加新行时都必须在同一行上初始化插件。

Answer 2

在追加元素后调用datepicker，如下所示。

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

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

    var cell1 = row.insertCell(0);
    var expense_date = document.createElement("input");
    expense_date.type = "text";
    expense_date.name = "expenses[" + counts + "].expense_date";
    cell1.appendChild(expense_date);

    //add this line.
    $('input[name="' + expense_date.name + '"]').datepicker();

    var cell2 = row.insertCell(1);
    var expense_against = document.createElement("input");
    expense_against.type = "text";
    expense_against.name = "expenses[" + counts + "].expense_against";
    cell2.appendChild(expense_against);

    var cell3 = row.insertCell(2);
    var amount = document.createElement("input");
    amount.type = "text";
    amount.name = "expenses[" + counts + "].amount";
    cell3.appendChild(amount);

    var cell4 = row.insertCell(3);
    var paid_by = document.createElement("input");
    paid_by.type = "text";
    paid_by.name = "expenses[" + counts + "].paid_by";
    cell4.appendChild(paid_by);

}

将datepicker添加到每个新添加的行

2 个答案: