按对象隐藏或删除表格HTML中的重复数据
按对象隐藏或删除表格HTML中的重复数据
提问于 2019-06-05 04:06:05
我正在使用连接从数据库中获取一些数据，它会重复值
基本上是这样的。唯一唯一的值是ticket。
! Reference | Localization | Ticket |
| M13000 | MP1 | 1 |
| M13000 | MP1 | 2 |
| M13000 | MP1 | 3 |
| M13000 | MP1 | 4 |
| M13000 | MP2 | 7 |
| M13000 | MP2 | 8 |
| M13000 | MP2 | 9 |
| M13001 | MP1 | 11 |
| M13001 | MP1 | 12 |
| M13001 | MP1 | 13 |
| M13002 | MP4 | 15 |
| M13002 | MP4 | 16 |在打印此数据时，我希望得到以下输出
! Reference | Localization | Ticket |
| M13000 | MP1 | 1 |
| | | 2 |
| | | 3 |
| | | 4 |
| | MP2 | 7 |
| | | 8 |
| | | 9 |
| M13001 | MP1 | 11 |
| | | 12 |
| | | 13 |
| M13002 | MP4 | 15 |
| | | 16 |基本上有一个层次结构，
引用有本地化，本地化有票证。
我使用C#和liq完成了这项工作，经历了许多循环，并将所有内容映射到对象中。虽然最后给出的结果是正确的，但是很难在html上处理布局，特别是因为我的一个要求是最大化每页的空间，所以我将表格分成了每页2列。
基本上就是这样
| Reference | Localization | Ticket | | Reference | Localization | Ticket |
| Reference | Localization | Ticket | | Reference | Localization | Ticket |
| Reference | Localization | Ticket | | Reference | Localization | Ticket |
| Reference | Localization | Ticket | | Reference | Localization | Ticket |
| Reference | Localization | Ticket | | Reference | Localization | Ticket |
| Reference | Localization | Ticket | | Reference | Localization | Ticket |因此，我认为将所有数据放在一个列表中，并在前端处理其余数据要容易得多，但我似乎无法弄清楚如何获得预期的结果。
以下是用于测试的代码示例
<table>
<thead>
<tr>
<th>Reference</th>
<th>Localization</th>
<th>Ticket</th>
</tr>
</thead>
<tbody>
<tr>
<td> M13000 </td>
<td> MP1 </td>
<td> 1 </td>
<tr>
<tr>
<td> M13000 </td>
<td> MP1 </td>
<td> 2 </td>
<tr>
<tr>
<td> M13000 </td>
<td> MP2 </td>
<td> 3 </td>
<tr>
<tr>
<td> M13000 </td>
<td> MP2 </td>
<td> 4 </td>
<tr>
<tr>
<td> M13001 </td>
<td> MP2 </td>
<td> 5 </td>
<tr>
<tr>
<td> M13001 </td>
<td> MP3 </td>
<td> 6 </td>
<tr>
</tbody>
</table>
回答 1
Stack Overflow用户
发布于 2019-06-05 04:10:22
无论何时打印Reference和Localization值，都要将它们与之前的值(即您已经存储的值)进行比较，如果它们不同，则只打印它们。
我不确定如何在HTML中打印该表，但是使用任何前端语言都可以轻松实现我所描述的内容。
以下是描述我所说的内容的快速代码片段：
const fields = [
['M13000', 'MP1', 1 ],
['M13000', 'MP1', 2 ],
['M13000', 'MP1', 3 ],
['M13000', 'MP1', 4 ],
['M13000', 'MP2', 7 ],
['M13000', 'MP2', 8 ],
['M13000', 'MP2', 9 ],
['M13001', 'MP1', 11],
['M13001', 'MP1', 12],
['M13001', 'MP1', 13],
['M13002', 'MP4', 15],
['M13002', 'MP4', 16]
];
var div = document.getElementById('out');
var prevRef, prevLoc;
for(let i = 0; i < fields.length; i++) {
var output = '';
output += "<p>";
output += "<span>";
output += fields[i][0] == prevRef ? " " : fields[i][0];
output += "</span>|";
output += "<span>";
output += fields[i][1] == prevLoc ? " " : fields[i][1];
output += "</span>|";
output += "<span>";
output += fields[i][2];
output += "</span>";
output += "</p>";
div.innerHTML += output;
prevRef = fields[i][0];
prevLoc = fields[i][1];
}span {
display: inline-block;
width: 80px;
padding: 0 8px;
text-align: center;
font-size: 9px;
line-height: 10px;
}
p {
margin: 0;
}<div id="out"></div>
如果本地化也依赖于引用，那么在打印本地化之前，您应该检查引用或本地化是否发生了更改(在我的代码中，应该是prevRef和prevLoc)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56450636
复制相关文章
相似问题
腾讯云开发者
