我有一个 html 表,它是根据从后端 api 获得的响应生成的。我只想查看用户将从输入类型编号中选择的行数。 我尝试引用堆栈溢出的其他答案,但由于具有动态数据,它们都没有解决我的问题。
这是html部分:
<label for="report" class="hideshow" style="color:black ; float:left ; font-weight: bold">Static Code Analysis Report</label>
<br/><center>
<label id="issues" style="font-size: 14px">Show</label>
<input type="number" id="table-row-num" min="1" max="1000" style="font-size: 14px">
<label id="issues" style="font-size: 14px">No. of Issues</label>
<button id="submitButton">Go</button>
</center>
<div class="col-md-12" id="codeScanReportDiv">
<div class="codeReport" id="codeReport">
<div class="reportTable">
<table class="table table-striped" id="reportTable">
<thead id="reportTableHead">
<tr id="reportTableTR">
<th>Issue/Bug Description</th>
<th>Artifact Type</th>
<th>Count</th>
<th>Recommendation</th>
</tr>
</thead>
<tbody id="reportTableBody">
<tr id="reportTableData">
</tr>
</tbody>
</table>
</div>
</div>
</div>
以下是js文件中的代码:
sonarQubeIssueApi = localStorage.sonarQubeIssueApi + "?appName="+"otfa" + "&projectName="+"R5-9";
getApi(sonarQubeIssueApi).done(function (data) {
$.each(data, function(key,value) {
$('#reportTable').find('tbody').append('<tr id=reportTableData><td>'+value.IssueDescription+'</td>'+'<td>'+value.drmArtifactType+'</td>'+'<td>'+value.count+'</td>'+'<td>'+value.recommendation+'</td></tr>');
});
loadingStop();
}).fail(function () {
loadingStop();
bootbox.alert({
size: "medium",
title: "Sonar Qube is Down",
message: "Cannot get the issue list from SonarQube"
});
});
请帮助我只生成用户将从 table-row-num id 中选择的那些行。非常感谢任何帮助!!
我尝试遵循(how to generate html table based on number of rows entered? 这对我也不起作用...它能够生成用户输入的行..但只有来自响应(api 响应)的一个条目在每一行中重复. 此外,表标题也不会出现。这是我尝试过的代码:
getApi(sonarQubeIssueApi).done(function (data) {
$.each(data, function(key,value) {
// $('#reportTable').find('tbody').append('<tr id=reportTableData><td>'+value.IssueDescription+'</td>'+'<td>'+value.drmArtifactType+'</td>'+'<td>'+value.count+'</td>'+'<td>'+value.recommendation+'</td></tr>');
$("#submitButton").click(function() {
var table = $("#reportTable");
var rowNum = parseInt($("#table-row-num").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr id=reportTableData>",
"<td>",
(i+1),
"</td>",
'<td>'+value.IssueDescription+'</td>'+'<td>'+value.drmArtifactType+'</td>'+'<td>'+value.count+'</td>'+'<td>'+value.recommendation+'</td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
最佳答案
我假设这是您想要做的。
getApi(sonarQubeIssueApi).done(function (data) {
var table = $('#reportTableBody');
var rowNum = parseInt($("#table-row-num").val(), 10);
var table.html("");
var filterData = data.slice(0, rowNum);
$.each(filterData, function(key,value) {
table.append('<tr id=reportTableData><td>'+value.IssueDescription+'</td>'+'<td>'+value.drmArtifactType+'</td>'+'<td>'+value.count+'</td>'+'<td>'+value.recommendation+'</td></tr>');
});
});
关于jquery - 如何根据输入类型编号中给定的行数生成 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57293095/