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

Question

I am creating HTML Table Rows dynamically ans intend to use JQuery UIs Autocomplete and Datepicker in them.

The CSS and HTML Code is

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

The data rows are filled on clicking the Add Row button on top right of screenshot. The Dated (Third Column) has Datepicker . File Reference and Address (second last column) have Autocomplete. The Program is working fine as long as its only one row. On adding more rows the autocomplete and datepicker are not working.

the js code to add a new row is as follows

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

}

Did lots of googling and tried lots of codes on Stackoverflow... but in vain. Can I get some help here. I believe this is the most sought query.

Answer 1

you have to reinitialize your jQuery tools autocomplete and datepicker when creating new elements in the DOM.

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); 
    // reinit datepicker and autocomplete here
}

I found an example for autocomplete here: http://jsfiddle.net/r08m8vvy/4/

Answer 2

I tweaked my js code like this and it works smooth

  <script>
  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>";
  //File Reference AutoComplete UI
  var appendFRTxt = "<td name='fr[]'><input class='form-control usedateFRautocomplete' name='fileRef' type='text' placeholder='File Ref' /></td>";
  trd += appendFRTxt; //These two steps through var necessary elese Throwing error
  //Mail Date
  var appendMDTxt = "<td name='md[]'><input class='form-control usedatepicker' name='mailDate' type='text' placeholder='Mail Date' /></td>";
  trd += appendMDTxt; //These two steps through var necessary elese Throwing error
  ///
  trd += "<td><?php echo $SecurityGrade ?></td>";
  trd += "<td><?php echo $Prece ?></td>";
  trd += "<td><?php echo $AddeeAppt ?></td>";
  //Stn List AutoComplete UI
  var appendSLTxt = "<td name='sl[]'><input class='form-control usedateSLautocomplete' name='stnlist' type='text' placeholder='Stn Address' /></td>";
  trd += appendSLTxt; //These two steps through var necessary elese Throwing error
  trd += "<td><?php echo $ModesOfDes ?></td>";
  trd += "</tr>";
  $("table tbody").append(trd);
  //File Ref
  $("tr").find("fr").append(appendFRTxt);
  var selectedSection = $('#section option:selected');
  var selsec = selectedSection.val();
  $.ajax({
    url: "../phpAssets/fileRefList.php",
    method: "POST",
    data: {
      selsec: selsec
    },
    success: function(data) {
      availableFileRefs = jQuery.parseJSON(new Array(data));
      $('.usedateFRautocomplete').autocomplete({
        source: availableFileRefs
      });
    }
  });
  //File Ref Ends
  //Mail Date   
  $("tr").find("md").append(appendMDTxt);
  $(".usedatepicker").datepicker({
    todayHighlight: true,
    format: 'dd M y',
    autoclose: true
  });
  //Mail Date Ends
  //Stn List
  $("tr").find("sl").append(appendFRTxt);
  var selectedSection = $('#section option:selected');
  var selsec = selectedSection.val();
  $.ajax({
    url: "../phpAssets/StnList.php",
    method: "POST",
    success: function(data) {
      availableStns = jQuery.parseJSON(new Array(data));
      $('.usedateSLautocomplete').autocomplete({
        source: availableStns
      });
    }
  });
  //Stn List Ends
}

addNewRow(); //Add One Row on loading the page 
$("#addtblRow").click(function() {
  var numofrows = $("#num_rows").val(); //numofrows is var desired by end-User
  frCounter++; //FileRef[] increment
  for (var i = 0; i < numofrows; i++) {
    addNewRow();
  }
});

// Find and remove selected table rows
$("#deletetblRow").click(function() {
      $("table tbody").find('input[name="record"]').each(function() {
        if ($(this).is(":checked")) {
          $(this).parents("tr").remove();
          frCounter--; //text box increment
        }
      });
<script>

I would like to say here that this improvement is based on guidance from this link