个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在寻找一种解决方案，使我能够以紧凑、易于阅读的方式显示大量日志输出。目标是隐藏尽可能多的信息，直到它们变得有趣，因为我们需要显示数千行日志输出。
通过在 td 中引入 div，我已经成功地阻止了我们的表格宽度达到 2800 像素。现在我想在用户将鼠标悬停在 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>
感谢每一个提示!
谢谢!
最佳答案
重读一下，我在代码中有一个错字，在其中添加了一个额外的引号，我说澄清了 id 和类，我在那里说错了，当我说的是类时，我说的是风格......
首先，您需要了解一些事情。id="somename"应该是整个文档中的唯一值，如果你想对元素进行分组以使它们具有相同的样式，请使用 class="somename"并使用 .而不是 CSS 中的 #。
您不清楚要显示数据的确切位置，我相信这就是您想要做的，您可以使用#fullline 代码的绝对定位将其放在您想要的位置。我读到你发表的关于想要做这种工具提示样式的评论，你可以用绝对定位来做(在 showdtl 部分动态调整，但听起来你想要做文本的静态放置是最好的。我更改了整行的宽度，以便您可以看到它根据需要适当扩展。fullline 是我单独留下的代码中的唯一 id，以说明类和 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>
关于javascript - 需要解决方案以在不破坏布局的情况下公开表中的详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12828577/
25
4
0
例如 Form1 frm1 = new Form1(); TextBox tb = new TextBox(); frm1.Controls.Add(tb); 现在我不能说 f
我有一个日期过滤器，我已经在我的 View 中公开了它。我想让界面更加用户友好并加强它的外观。我不想选择日期，而是从以下选项中进行选择。 最后一天 上周 去年 全部 然后，这将过滤日期字段。这可能吗？
如何向用户公开我的用户控件组件之一的 ActualWidth 属性？ 我找到了很多关于如何通过创建新的依赖属性和绑定(bind)来公开普通属性的示例，但没有关于如何公开像 ActualWidth 这样
Github 最近推出了项目功能。 当项目处于 repo 级别时，如果 repo 本身是公开的，那么任何人都可以访问这些项目。 但是，组织级别的项目仅对组织成员可见。 例如，https://githu
我想要从我的网络服务器访问 JavaScript 文件。 以便任何人都可以在其网站中访问和引用它。 e-g 假设 abcxyzserver.com 是我的网络服务器。 www.abcxyzserv
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
我正在尝试获取 Canvas 的上下文，显然我收到错误Uncaught TypeError: Cannot call method 'getContext' of null 显然我在它初始化之前就得到
我正在对设置 HA 集群的解决方案进行故障排除。虽然我知道应用程序执行故障转移和故障回复所需的端口，但不知何故 dockerized 解决方案不起作用。我怀疑有一些我还不知道的端口。 目前，我的 EX
我试图在能够使用 Helm 运行的k8集群中设置Prometheus。当我使用外部IP将Prometheus-Server作为LoadBalancer服务公开时，访问仪表板。 当我尝试将此服务配置为C
我知道关于这个主题也有类似的问题，但我不完全确定他们正在解决同样的问题。所以要明确的是... 我有一个现有的类库，其中包含用于类型、业务逻辑和数据访问的命名空间。逻辑和数据访问命名空间中的类是静态的，
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
1.)执行以下命令生成一个随机数，用于后面的步骤 NUMBER=$[ ( $RANDOM % 1000 ) + 1 ] echo $NUMBER 注意:将句子 your random number 替
类似这样的问题有很多，但仍然无法得到我真正想要的，而且它们都有一些与我不同的地方，那就是:我有一个 UserControl: 在名为UCProject 的类库项目中单独构建； UCProject 项目
我有一个这样的基类: public class BaseModalCommand { protected object m_commandArgument; protected i
给定以下 JQuery 插件。是否可以将变量“元素”公开给插件外部的 javascript？如果是这样，这是怎么做到的？对于此插件外部的 javascript，访问“元素”的语法是什么？ (funct
我有两个使用 jhipster 创建的微服务。 (ms1 和 ms2) 我使用 AuthorizedFeignClient 在两个微服务之间进行通信。 ms1 有一些 DTO 类，用作 REST AP
我正在使用错误跟踪软件来报告网络浏览器中发生的任何错误，但我的生产站点上的代码已缩小。因此，调试几乎是不可能的(变量名被更改等)。 我想将完整的源映射文件投入生产，以便我可以调试这些错误，但在这样做时
我在 Kotlin 公开库中可以找到的所有 Material 都假定该表具有一个主标识列，因此在大多数示例中显示的实体继承了 IntEntity 抽象类。例如: class UserLocation(
我有一个类 (Capsule)，它有很多 protected 方法 (30+)。这个想法是允许开发人员扩展此类并在类 (ImADev) 中使用 protected 方法，但将其留给开发人员将它们公开为
Tomcat 日志位置是: /apache/apache-tomcat-8.0.15/logs 允许通过浏览器访问这些日志的标准方法是什么？ 为此启用 Tomcat 目录列表标准吗？ 最佳答案 我曾在
我是一名优秀的程序员,十分优秀！