將日期選擇器添加到每個新添加的行中

這裏我想將日期選擇器添加到新添加的行中，但同樣沒有反映。嘗試使用克隆（真）功能，但沒有幫助。將日期選擇器添加到每個新添加的行中

下面的代碼顯示了四列，第一列是日期字段。也必須將日期選擇器複製到新添加的行中。

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

來源

2015-08-29 Sai Bharath

添加元素後調用日期選擇器，如下所示。

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

}

來源

2015-08-29 16:34:07 RRK

@SaiBharath嘗試'$（「輸入[名稱=「」 + EXPENSE_DATE。 name +'「]'）。datepicker（）;'，如果這不起作用，這意味着你的輸入在兩行中都有相同的名字。所以datepicker只有第一個這個名字.. – RRK

幫助了很多謝謝你！ –

你需要做的，是調用datepicker()後的行添加到頁面。這意味着每次添加新行時，都必須在同一行上初始化插件。

來源

2015-08-29 16:34:05

通過上述增加的線路組合和您的建議，以保持它的工作的機能的研究後的日期選擇器..感謝名單一噸:) –

將日期選擇器添加到每個新添加的行中

回答

相關問題