映射响应以创建动态表时出现问题

Question

我想用jQuery实现一个表。下面是我需要映射的示例响应。

[{"type":"Function/Class/Object","count":5,"details":[{"issueId":"otfa_10_R5.9_23","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 16 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"},{"issueId":"otfa_10_R5.9_42","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 17 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"}]},{"type":"Algorithm/Method","count":1,"details":[{"issueId":"otfa_10_R5.9_50","buildId":"otfa_10_R5.9","description":"13 duplicated blocks of code must be removed.","date":"2019-08-19","drmtype":"Algorithm/Method","recommendation":"Ensure formulas are validated / proven"}]}]

我想在第一列中显示type，在第二列中显示count，在第三列中显示固定文本Details。徘徊在Details上，我想显示description和相应的recommendation。

但是映射数据本身存在一些问题。

网页代码：

<tr id="reportTableTR">
<th>Issue Type</th>
<th>Count</th>
<th></th>
</tr>

JS代码：

$.each(data, function(key,value) {
table.append('<tr id=reportTableData><td>'+value.type+'</td>'+'<td>'+value.count+'</td>'+'<td>'+ "Details" + '</td></tr>');
});

->数据包含响应。

我在第一部分中缺少什么？悬停的事情只能在之后实现。

Answer 1

您的问题只是您在表行上使用append()，因此您将一行嵌套在另一行中。

假设您的行周围有一个适当的表结构(即，至少有一个带有<tbody>标签的<table>标签(，最简单的方法是简单地将reportTableTRID 上移到<tbody>上。

const data = [{"type":"Function/Class/Object","count":5,"details":[{"issueId":"otfa_10_R5.9_23","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 16 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"},{"issueId":"otfa_10_R5.9_42","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 17 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"}]},{"type":"Algorithm/Method","count":1,"details":[{"issueId":"otfa_10_R5.9_50","buildId":"otfa_10_R5.9","description":"13 duplicated blocks of code must be removed.","date":"2019-08-19","drmtype":"Algorithm/Method","recommendation":"Ensure formulas are validated / proven"}]}];
const table = $('#reportTableTR');
$.each(data, function(key, value) {
table.append('<tr class="table-row"><td>' + value.type + '</td>' + '<td>' + value.count + '</td>' + '<td>' + "Details" + '</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="reportTableTR">
<tr>
<th>Issue Type</th>
<th>Count</th>
<th></th>
</tr>
</tbody>
</table>

请注意，我已经从您在此处附加的表行中删除了 ID，因为 ID 应该是唯一的。我把它变成了一个类。如果希望每一行都有一个唯一标识符，则可以修改函数以使用函数的key参数动态创建动态 ID。

---

或者，如果你特别想选择第一行开始，你可以使用 jQuery 的after()函数。下面是一个示例，以及向行添加动态 ID：

const data = [{"type":"Function/Class/Object","count":5,"details":[{"issueId":"otfa_10_R5.9_23","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 16 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"},{"issueId":"otfa_10_R5.9_42","buildId":"otfa_10_R5.9","description":"Refactor this method to reduce its Cognitive Complexity from 17 to the 15 allowed.","date":"2019-08-19","drmtype":"Function/Class/Object","recommendation":"Create a way to map requirements and its variations  to coded functions"}]},{"type":"Algorithm/Method","count":1,"details":[{"issueId":"otfa_10_R5.9_50","buildId":"otfa_10_R5.9","description":"13 duplicated blocks of code must be removed.","date":"2019-08-19","drmtype":"Algorithm/Method","recommendation":"Ensure formulas are validated / proven"}]}];
const table = $('#myTable');
$.each(data, function(key, value) {
const lastRow = $(table).find('tr:last-child');
lastRow.after('<tr id="reportTableTR-' + key + '"><td>' + value.type + '</td>' + '<td>' + value.count + '</td>' + '<td>' + "Details" + '</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr id="reportTableTR">
<th>Issue Type</th>
<th>Count</th>
<th></th>
</tr>
</tbody>
</table>