如何使用 ajax 在 dropdownchange 上将数据加载到表中

Question

$("#sel_gram").change(function(){
    var gramid = $(this).val();

    $.ajax({
        url: 'getBooth-details.php',
        type: 'post',
        data: {gram:gramid},
        dataType: 'json',

        success:function(response){

            var len = response.length; 

            for( var i = 0; i<len; i++){
                var id = response[i]['id'];
                var name = response[i]['name'];
                var booth_officer_name = response[i]['booth_officer_name']; 
                var booth_officer_contact = response[i]['booth_officer_contact'];               
            }
        }         
    });
});

我想将此添加到我在 select 选项下方设计的表格中。 我正在正确获取所有数据，但我无法在我的表中使用它。

这是我要显示数据的表格。

<table class="table table-hover p-table">
                      <thead>
                      <tr>
                          <th>Booth Name</th>
                          <th>Booth Adhikari</th>
                          <th>Contact</th>

                          <th>Custom</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td class="p-name">
                              <h6 id="boothname">Name</h6>
                          </td>
                          <td class="p-team">
                             <h6 id="adhikariname"></h6>
                          </td>

                          <td>
                              <h6 id="adhikaricontact"></h6>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>

                      </tbody>
                  </table>

这是我希望显示我的数据的地方。在点击查看时，我想将用户带到带有展位 ID 的下一页，我可以显示更多详细信息

Answer 1

您可以在某些变量中使用+=每行 append ，然后在<tbody>中使用.html()到 append 同一行。

演示代码：

 //your response var response = [{ "id": "1", "name": "Booth First", "booth_officer_name": "First Adhikari", "booth_officer_contact": "9827198271", "gram_parshad_name": "Gram Officer One", "gram_parshad_contact": "1231231231", "gram_population": "10000", "gram_house_count": "106", "gram_voters_count": "8922", "gram_polling_both_count": "20", "zone_selected": "23", "sector_selected": "14", "panchayat_selected": "9", "gram_selected": "6", "zone_area": "dongargadh", "zone_region": "rural" }]; var len = response.length; var data = ""; for (var i = 0; i < len; i++) { //appeding each row inside <tr> data += '<tr><td class="p-name"><h6 id="boothname">' + response[i]['name'] + '</h6> </td><td class="p-team"> <h6 id="adhikariname">' + response[i]['booth_officer_name'] + '</h6></td> <td><h6 id="adhikaricontact">' + response[i]['booth_officer_contact'] + '</h6></td><td><a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a><a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a><a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a> </td></tr>'; } //appending data inside table <tbody> $("#data").html(data)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-hover p-table" border="1"> <thead> <tr> <th>Booth Name</th> <th>Booth Adhikari</th> <th>Contact</th> <th>Custom</th> </tr> </thead> <tbody id="data"> <!--data will come here--> </tbody> </table>