需要在不破坏布局的情况下在表格中显示详细信息的解决方案
我目前正在寻找一种解决方案，使我能够以一种紧凑、易于阅读的方式显示大量日志输出。我们的目标是隐藏尽可能多的信息，直到它们变得有意义，因为我们需要显示数千行日志输出。
我已经成功地通过在td中引入div来阻止我们的表达到2800px的宽度，现在我想在用户将鼠标悬停在div上时向用户公开完整的信息，但不破坏表的布局，也不需要在代码中有两次所有信息，因为html已经接近3-4 MByte。
可以使用Javascript和/或JQuery，但我还是个新手，目前遇到了困难。
以下是html代码的一个小的简化示例。
<head>
<title>expose full details</title>
<style>
#codeline { width:150px; overflow:hidden; text-overflow: ellipsis; }
#fullline { background: #EEE; z-index: 10; display: hidden; }
#loglines { width:250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
</head>
<body>
<table style="border:1px solid black;">
<tr>
<td>PASS</td>
<td>2012-10-10 09:30:31</td>
<td><div id="codeline">c:\myfiles\are\not\stored\here\testscript.py:line434</div></td>
<td><div id="loglines">Here is a very long log output that might continue for 10-20 lines</div></td>
</tr>
<tr>
<td>FAIL</td>
<td>2012-10-10 09:30:32</td>
<td><div id="codeline">c:\myfiles\are\not\stored\here\testscript.py:line439</div></td>
<td><div id="loglines">Here is another very long log output that might continue for 10-20 lines</div></td>
</tr>
</table>感谢您的每一个提示！
谢谢!
回答 2
Stack Overflow用户
发布于 2012-10-11 06:32:33
重读这篇文章，我在代码中有一个打字错误，在里面加了一个额外的引号，我说澄清了一些id和class，我在这里说错了，当我说class的时候，我说的是风格……
首先，你需要注意几件事。在整个文档中，id="somename“应该是一个唯一的值，如果您想对项目进行分组，使它们具有相同的样式，请使用class="somename”并使用引用它。而不是CSS中的#。
你不清楚你想要数据显示的确切位置，我相信这就是你想要做的，你可以使用#fullline代码的绝对定位来把它放在你想要的地方。我读到了你关于想要做这种工具提示风格的评论，你可以用绝对定位来做(在showdtl部分动态调整，但从听起来像是你想做一个静态的文本放置将是最好的。我更改了整行的宽度，以便您可以看到它可以根据需要正确地展开。fullline是代码中的唯一id，为了说明class和id的用法，我把它留了下来。我只是把它扔在一起，它是有效的，但我相信它将需要在你的一端进行一些调整才能得到想要的结果。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>expose full details</title>
<style>
.codeline { width:150px; overflow:hidden; text-overflow: ellipsis; }
#fullline { background: #FFCC66; z-index: 10; width: 250; display: hidden; }
.loglines { width:250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
</head>
<body>
<script>
function showdtl(passedobj){
fullline.style.display = '';
fullline.innerHTML=passedobj.innerHTML;
}
function hidedtl(){
fullline.style.display = 'none';
}
</script>
<table style="border:1px solid black;">
<tr>
<td>PASS</td>
<td>2012-10-10 09:30:31</td>
<td><div class="codeline">c:\myfiles\are\not\stored\here\testscript.py:line434</div></td>
<td><div class="loglines" onMouseOver="showdtl(this);return true" onMouseOut="hidedtl();return true" >Here is a very long log output that might continue for 10-20 lines</div></td>
</tr>
<tr>
<td>FAIL</td>
<td>2012-10-10 09:30:32</td>
<td><div class="codeline">c:\myfiles\are\not\stored\here\testscript.py:line439</div></td>
<td><div class="loglines" onMouseOver="showdtl(this);return true" onMouseOut="hidedtl();return true">Here is another very long log output that might continue for 10-20 lines</div></td>
</tr>
</table>
<div id="fullline">
</div>
</body>Stack Overflow用户
发布于 2012-10-11 05:31:23
我认为如果这些div很大，您可能应该允许它们滚动：
#codelines, #loglines {overflow: auto; width: 250px; max-height: 500px }overflow:auto只会在必要时显示滚动条，所以它看起来比overflow:scroll要好得多。让他们滚动500px (或800像素)的日志记录框比让一个巨大的网页隐藏额外信息要好得多。
编辑：
如果您真的希望此功能仅在悬停时可用，您可以使用以下命令：
#codelines:hover, #loglines:hover { overflow: hidden; width: 250px; max-height: 500px }
#codelines:hover, #loglines:hover {overflow: auto}不过，我从来没有见过这样的事情。
https://stackoverflow.com/questions/12828577
复制相似问题
腾讯云开发者
