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（最后一列）具有自动填充功能。只要它只有一行，该程序就可以正常工作。在添加更多行时，自动完成和日期选择器不起作用。

添加新行的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上进行了很多google搜索和尝试了很多代码......但是徒劳无功。我可以在这里得到一些帮助。我相信这是最受欢迎的查询。

Answer 1

在DOM中创建新元素时，必须重新初始化jQuery工具自动完成和datepicker。

overflow-y: -moz-hidden-unscrollable;

我在此处找到了自动填充的示例：http://jsfiddle.net/r08m8vvy/4/

Answer 2

我像这样调整了我的js代码，它运行顺畅

  <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

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

2 个答案: