首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >按对象隐藏或删除表格HTML中的重复数据

按对象隐藏或删除表格HTML中的重复数据
EN

Stack Overflow用户
提问于 2019-06-05 04:06:05
回答 1查看 21关注 0票数 0

我正在使用连接从数据库中获取一些数据,它会重复值

基本上是这样的。唯一唯一的值是ticket。

代码语言:javascript
复制
!  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   |

在打印此数据时,我希望得到以下输出

代码语言:javascript
复制
!  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列。

基本上就是这样

代码语言:javascript
复制
  |  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    |

因此,我认为将所有数据放在一个列表中,并在前端处理其余数据要容易得多,但我似乎无法弄清楚如何获得预期的结果。

以下是用于测试的代码示例

代码语言:javascript
复制
 <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>

EN

回答 1

Stack Overflow用户

发布于 2019-06-05 04:10:22

无论何时打印ReferenceLocalization值,都要将它们与之前的值(即您已经存储的值)进行比较,如果它们不同,则只打印它们。

我不确定如何在HTML中打印该表,但是使用任何前端语言都可以轻松实现我所描述的内容。

以下是描述我所说的内容的快速代码片段:

代码语言:javascript
复制
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];
}
代码语言:javascript
复制
span {
  display: inline-block;
  width: 80px;
  padding: 0 8px;
  text-align: center;
  font-size: 9px;
  line-height: 10px;
}

p {
  margin: 0;
}
代码语言:javascript
复制
<div id="out"></div>

如果本地化也依赖于引用,那么在打印本地化之前,您应该检查引用或本地化是否发生了更改(在我的代码中,应该是prevRefprevLoc)。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56450636

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档