$("#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>這是我希望顯示我的數據的地方..點擊查看我想將用戶帶到下一頁，展位顯示我可以顯示更多詳細信息
1 回答
汪汪一只貓
TA貢獻1898條經驗 獲得超8個贊
您可以+=在某個變量中使用追加每一行，然后.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>
- 1 回答
- 0 關注
- 124 瀏覽
添加回答
舉報
0/150
提交
取消