Question

我正在寻找一种解决方案，允许我以紧凑，易读的方式显示大量日志输出。目标是隐藏尽可能多的信息，直到它们成为感兴趣，因为我们需要显示数千行日志输出。

我已经成功地通过在td中引入div来保持我们的表格宽度为2800px。现在我希望在用鼠标悬停在div上时向用户公开完整信息，但不会破坏表格的布局，也不需要在代码中两次获取所有信息，因为html已经接近3-4 MByte。 / p>

可以使用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>

赞赏每一个提示！

谢谢！

Answer 1

重读这个我在代码中输入了一个拼写错误的内容，我说了一下ID和类，我错过了那里并且在我说的时候说风格...

首先，您需要了解一些事情。 id =“somename”应该是整个文档中的唯一值，如果要对项目进行分组，请将它们设置为相同的use class =“somename”并用a引用它。而不是CSS中的＃。

您不清楚您希望数据显示在哪里，我相信这就是您要做的事情，您可以使用#fullline代码的绝对定位将其放在您想要的位置。我读了一篇关于想要做这个工具提示风格的评论你可以用绝对定位做的（在showdtl部分动态调整，但听起来你想要做静态放置文本是最好的。我更改了整行的宽度，以便您可以根据需要正确展开。在我的代码中，我独自留下了一个唯一的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>

需要解决方案来暴露表中的细节而不破坏布局

1 个答案: