javascript - 如何使用ajax将数据加载到下拉列表更改的表中

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'];               
            }
        }         
    });
});

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

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

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

这是我希望显示我的数据的地方。单击 View 时，我希望将用户带到下一页，其中包含展位的 ID，以便我可以显示更多详细信息

Answer 1

您可以使用 += 追加每一行在某个变量中，然后使用 .html()将同一行添加到 <tbody> 中.

演示代码:

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