![](/img/trans.png)
[英]How to append json output in html table with editable tr using for loop
[英]How to append JSON response output into html table using Javascript
我有此响应输出(JSON类型)->从控制器传递
[[“ Subash Nisam”,测试,“ Medix Care”,“ 2017.03.02”,“ 9.30 am到10.30 am”],[“ Subash Nisam”,测试,“ Medix Care”,“ 2017.03.02”,“ 3.30至5.30“]]
我想使用Javascript将它附加到表tbody后面
<table class="table table-bordered table-hover" id="doctorresultTable">
<thead>
<tr>
<th>Doctor Name</th>
<th>Speciality</th>
<th>Hospital</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
我该怎么做?
这是我的JS代码:
function searchbyNameandDate(name, avadate) {
var ajaxConfig = {
type: "GET",
url: "searchbyNameandDate?name=" + name + "&date=" + avadate,
async: true,
dataType: "json"
};
$.ajax(ajaxConfig)
.done(function (response) {
for (var i = 0; i < response.length; i++) {
for (var j = 0; j < 4; j++) {
var html = "<tr> \
<td>" + response[i][j] + "</td> \
<td>" + response[i][j] + "</td>\
<td>" + response[i][j] + "</td> \
<td>" + response[i][j] + "</td> \
<td>" + response[i][j] + "</td> \
</tr>";
$("#doctorresultTable tbody").append(html);
}
}
})
.fail(function (xhr, status, errorMessage) {
alert("failed to load data");
console.log("XML HTTP REQUEST : " + xhr);
console.log("Status : " + status);
console.log("Error message : " + errorMessage);
});
}
}
使用纯JavaScript(ES6):
const data = [["Subash Nisam",'test',"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",'test',"Medix Care","2017.03.02","3.30 to 5.30"]]; var tableContent = document.querySelector('#doctorresultTable > tbody'); data.map(instance => { const row = document.createElement('tr'); tableContent.appendChild(row); instance.map(info => { const cell = document.createElement('td'); cell.innerText = info; row.appendChild(cell); }); });
<table class="table table-bordered table-hover" id="doctorresultTable"> <thead <tr> <th>Doctor Name</th> <th>Speciality</th> <th>Hospital</th> <th>Date</th> <th>Time</th> </tr> </thead> <tbody> </tbody> </table>
尽管使用Angular或React这样的框架来渲染视图会更容易(如果不需要构建整个应用程序,则最好使用React)。
我用常规功能替换了箭头功能。 现在可以正常工作了。 ------------------------- @ Armen Vardanyan->感谢您的帮助。
这是将箭头功能替换为常用功能后的代码。
const data = [["Subash Nisam",'test',"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",'test',"Medix Care","2017.03.02","3.30 to 5.30"]];
var tableContent = document.querySelector('#doctorresultTable > tbody');
data.map(function(instance) {
const row = document.createElement('tr');
tableContent.appendChild(row);
instance.map(function(info) {
const cell = document.createElement('td');
cell.innerText = info;
row.appendChild(cell);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.