2

現在、多くのログ出力をコンパクトで読みやすい方法で表示できるソリューションを探しています。目標は、何千行ものログ出力を表示する必要があるため、興味を引くまでできるだけ多くの情報を非表示にすることです。

td 内に div を導入することで、テーブルの幅が 2800px にならないようにすることにすでに成功しています。ここで、ユーザーが div にカーソルを合わせたときに完全な情報をユーザーに公開したいと考えていますが、テーブルのレイアウトを破壊したり、コードにすべての情報を 2 回含める必要はありません。

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>

すべてのヒントは大歓迎です！

ありがとう！

4

2 に答える 2

0

これを読み直して、コードにタイプミスがあり、余分な引用符が追加されました。IDとクラスを少し明確にしたと言いました。そこで間違えて、クラスを意味するときにスタイルを言いました...

まず、いくつかのことを認識する必要があります。id="somename" はドキュメント全体で一意の値にする必要があります。アイテムをグループ化して同じスタイルにする場合は、class="somename" を使用し、. 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>
于 2012-10-10T22:32:33.180 に答える
0

I think you should probably allow these divs to scroll if they are huge: 

#codelines, #loglines {overflow: auto; width: 250px; max-height: 500px }

overflow:auto will only display a scroll bar if necessary, so it looks much better than overflow:scroll. Letting them scroll a 500px (or 800, whatever) box of logging is much nicer than having a giant webpage with additional info hidden way down.

EDIT:

If you really want this to only be available on hover you could use this:

#codelines:hover, #loglines:hover { overflow: hidden; width: 250px; max-height: 500px }
#codelines:hover, #loglines:hover {overflow: auto}

I've never really seen that done though.

于 2012-10-10T21:31:22.953 に答える