jquery - 如何根据输入类型编号中给定的行数生成 HTML 表格

Question

我有一个 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; 
                    });

Answer 1

我假设这是您想要做的。

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