如何在动态添加的行

时间:2018-02-27 13:25:17

标签: javascript php dynamic

我创建了一个动态添加和删除行的php程序,并使用数据库值自动填充输入字段。 第一次添加行时代码完美无缺,但代码没有显示添加第二行时所需的结果。 请提出解决方案,因为我是编码新手。

    <html>
        <head>

             <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

       </head>
    <body>
        <div class="container">
            <br />
            <br />
            <div class="col-md-3">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- webslesson_mainblogsec_Blog1_1x1_as -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-4529508631166774"
                     data-ad-host="ca-host-pub-1556223355139109"
                     data-ad-host-channel="L0007"
                     data-ad-slot="6573078845"
                     data-ad-format="auto"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
            <div class="col-md-9">

                <div class="form-group">
                    <form name="add_name" id="add_name">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dynamic_field">
                                <tr>

                                    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                                </tr>
                            </table>
                            <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
$(document).ready(function(){
    var i=0;
    $('#add').click(function(){
        i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="country" id="country" class="form-control" placeholder="Enter Country Name" /><div id="countryList"></div></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');

    $(document).ready(function(){  

      $('#country').keyup(function(){  
           var query = $(this).val();  
           if(query != '')  
           {  
                $.ajax({  
                     url:"fetch.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#countryList').fadeIn();  
                          $('#countryList').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#country').val($(this).text());  
           $('#countryList').fadeOut();  
      });  


    });


 });  



    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });



});
</script>

这是我的fetch.php代码 -

 <?php  
     $connect = mysqli_connect("localhost", "root", "", "testing4");  
     if(isset($_POST["query"]))  
     {  
          $output = '';  
          $query = "SELECT * FROM tbl_country WHERE country_name LIKE '%".$_POST["query"]."%'";  
          $result = mysqli_query($connect, $query);  
          $output = '<ul class="list-unstyled">';  
          if(mysqli_num_rows($result) > 0)  
          {  
               while($row = mysqli_fetch_array($result))  
               {  
                    $output .= '<li>'.$row["country_name"].'</li>';  
               }  
          }  
          else  
          {  
               $output .= '<li>Country Not Found</li>';  
          }  
          $output .= '</ul>';  
          echo $output;  
     }  
     ?>

0 个答案:

没有答案