Как загрузить данные в таблицу в раскрывающемся списке, используя 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>

Здесь я хочу, чтобы мои данные отображались ... где при щелчке мышью я хочу перевести пользователя на следующую страницу с идентификатором кабины, чтобы показать, что я могу показать дополнительные сведения

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>