html表中的jquery datepicker，动态创建行

Question

我正在动态创建html表行，并打算在其中使用JQuery UIs Autocomplete和Datepicker。

CSS和HTML代码是

<style>

            table {                
                font-family: arial, sans-serif;         
                border-collapse: collapse;          
                table-layout:fixed;         
                width: 100%;            
                padding: 2px;   
                border: 1px solid blue;                 
            }           
            th {            
                border: 1px solid blue;         
                padding-top: 10px;          
                padding-bottom: 10px;           
                background-color: #1b9add;          
                text-align: center;         

                valign: middle;         
                color: white;   
                background: #395870;
                background: linear-gradient(#49708f, #293f50);      
                max-width: 150px;           

            }           

            table td {          
                border: 1px solid blue;             
                word-wrap:break-word;           
                text-align: left;           
                vertical-align: top;            
                padding: 2px;           
            }           
            tr:nth-child(even) {            
                background-color: #dddddd;          
                padding: 2px;   
                border: 1px solid blue; 
            }           
            select option:checked {         
            color: white;           
            background: #f26532;            
            padding: 2px;           
            }           


            #buttonSet {
              position: fixed;
              bottom: 20px;
              right: 10px;
            }

        </style>    
        <title>Mail Management System: Register Send Mail</title>
        <div id="wrapper">

            <div class="container"> 
            <br>
                <div class="btn-group">
                  <button id="deletetblRow" class="btn btn-danger btn-sm">Delete Row</button>
                </div>

                  <div class="btn-group pull-right " >
                    <input class="your-input " type="number" style="width: 45px; height: 30px; font-weight: bold;" type="number" 
                            name="num_rows" id="num_rows" value="1" onfocus="this.select()" min="1" max="10" 
                            required=""/>
                    <button id="addtblRow" class="btn btn-primary btn-sm" >Add Row</button>
                </div>


                <table id="sendMailTable">
                  <thead>
                    <tr>
                      <th scope="col" style="width:  20px;">Sel</th>
                      <th scope="col" style="width:  75px;">Section</th>
                      <th scope="col" style="width: 175px;">File Reference</th>
                      <th scope="col" style="width: 100px;">Dated</th>
                      <th scope="col" style="width: 120px;">Security Grade</th>
                      <th scope="col" style="width: 125px;">Precedence</th>
                      <th scope="col" style="width: 100px;">Addressee</th>
                      <th scope="col" style="width:  100px;">Address</th>
                      <th scope="col" style="width: 140px;">Mode</th>
                <!--      <th scope="col">RL/Ticket No</th> -->
                    </tr>
                  </thead>
                    <tbody name='tblBody' id='tblBody'>
                    </tbody>
                </table>

            </div>

            <div class="container"> 
                    <div id="ajaxMsg" name="ajaxMsg" ><?php echo $SelectedCommandName; ?></div> 
            </div>

    <div id="buttonSet">
        <button id="btnSave" class="btn btn-primary">Save</button>
        <button id="btnCancel" class="btn btn-danger">Cancel</button>
    </div>
</div>

单击屏幕截图右上角的Add Row按钮即可填充数据行。 Dated（第三纵队）有Datepicker。 File Reference和Address（最后一列）有Autocomplete。只要它只有一行，该程序就可以正常工作。在添加更多行时，自动完成和日期选择器不起作用。

添加新行的js代码如下

   function addNewRow(){
    var trd="";
    trd +="<tr>";
    trd +="<td><input type='checkbox' name='record' class='form-control'></td>";
    trd +="<td><select name='section' id='section' class='form-control'><?php echo $sectionNames ?></select></td>";
    trd +="<td><input name='fileRef' id='fileRef' class='form-control'></td>";
    trd +="<td><input class='form-control' type='text' placeholder='Mail Date'></td>";
    trd +="<td><?php echo $SecurityGrade ?></td>";
    trd +="<td><?php echo $Prece ?></td>";
    trd +="<td><?php echo $AddeeAppt ?></td>";
    trd +="<td><input name='address1' id='address1' class='form-control'></td>";
    trd +="<td><?php echo $ModesOfDes ?></td>";
    trd +="</tr>";
    $("table tbody").append(trd);

}

在Stackoverflow上进行了大量的谷歌搜索和尝试了很多代码......但是徒劳无功。我可以在这里得到一些帮助。我相信这是最受追捧的查询。

Answer 1

另一答案