2013-08-07 19 views
18

pandas to_html関数を使用してテーブルを作成していますが、可変長の出力テーブルの一番下の行をハイライトすることができます。私の話をするために、HTMLの任意の実際の経験を持っている、と私はオンラインを見つけたすべてはだから私は最終行が<tr style=""background-color:#FF0000">を持たなければならないこと(あるいは、私が好きな色)を知っているこの パンダのデータフレームto_html:テーブル行のハイライト

<table border="1"> 
    <tr style="background-color:#FF0000"> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
</table> 

なかったんではなく、ちょうど<tr>ですが、どうやってやるかわからないのは、私が作っているテーブルでこれが起こることです。私はto_html関数自体ではできないと思いますが、テーブルが作成されたらどうしたらいいですか?

何か助けていただければ幸いです。

答えて

17

あなたはjQueryのを使用してJavaScriptでそれを行うことができます:あなたが使用してちょうどパンダテーブルをフィルタリングすることができるように

$('table tbody tr').filter(':last').css('background-color', '#FF0000') 

また、パンダの新しいバージョンでは、テーブルのHTMLにクラスdataframeを追加します。

$('table.dataframe tbody tr').filter(':last').css('background-color', '#FF0000') 

ただし、自分のクラスを追加することもできます。

df.to_html(classes='my_class') 

あるいは複数:

df.to_html(classes=['my_class', 'my_other_class']) 

あなたがここにIPythonノートブックを使用している場合は、完全な作業例です:

In [1]: import numpy as np 
     import pandas as pd 
     from IPython.display import HTML, Javascript 
In [2]: df = pd.DataFrame({'a': np.arange(10), 'b': np.random.randn(10)}) 
In [3]: HTML(df.to_html(classes='my_class')) 
In [4]: Javascript('''$('.my_class tbody tr').filter(':last') 
              .css('background-color', '#FF0000'); 
        ''') 

それともあなたもプレーンなCSSを使用することができます。

In [5]: HTML(''' 
     <style> 
      .df tbody tr:last-child { background-color: #FF0000; } 
     </style> 
     ''' + df.to_html(classes='df')) 

可能性は無限です。

編集: htmlファイルを作成

import numpy as np 
import pandas as pd 

HEADER = ''' 
<html> 
    <head> 
     <style> 
      .df tbody tr:last-child { background-color: #FF0000; } 
     </style> 
    </head> 
    <body> 
''' 
FOOTER = ''' 
    </body> 
</html> 
''' 

df = pd.DataFrame({'a': np.arange(10), 'b': np.random.randn(10)}) 
with open('test.html', 'w') as f: 
    f.write(HEADER) 
    f.write(df.to_html(classes='df')) 
    f.write(FOOTER) 
+7

私はあなたの答えはいくつかのHTML/JS/CSSの経験を持っている人のための素晴らしいと思いますが、私はHTMLと経験のない誰かが見つけることが起こっていると思いますあなたのソリューションは少し圧倒的です。 –

+0

ほんの少し...私はここでクラスの作成が何をしているのか分かりません。私はpython 2.7.5(すべてのパッケージをpython(x、y)バンドルにしています)とコマンドプロンプトからファイルを実行しています。私はIPythonであなたの例を実行し、を取得します。しかし、非常に包括的に見える回答に感謝! @Viktor –

+0

ipython、ipython qtconsoleまたはipythonノートブックのシェル版でコードを実行していますか?そして、あなたは正確に何を達成しようとしていますか? –

4

私は最後の行がレンダリングされるものですので、ipythonで(jupyter)を動作するようにヴィクトルの「完全な作業例」@得るが、移動することはできませんJavascriptの後のHTMLレンダリングは私のためには機能しませんでした。

「プレーンCSS」の例が機能し、そこにJavaScriptの<script>を配置することもできます。これにより、https://github.com/christianbach/tablesorterを使ってソート可能なPandasデータフレームをレンダリングすることができました。 .jsファイルがローカルであることを

df = pd.DataFrame({'a': np.arange(10), 'b': np.random.randn(10)}) 
from IPython.display import HTML, Javascript 
HTML('''<script src='./tablesort/tablesort.min.js'></script> 
<script src='./tablesort/src/sorts/tablesort.number.js'></script> 
<script> 
new Tablesort(document.getElementById('sort')); 
</script> 
'''+ df.to_html(classes ='sort" id = "sort')) 

注:

はここで完全な例です。 MIMEタイプがplain/txtであるため、githubの生コードを直接参照することはできません。

更新:私は、パンダv0.17.1が機能をadd style to the DataFrame HTML outputにリリースしたことに気付きました。

17

パンダにスタイリング機能が追加されましたので、JavaScriptハッキングはもう必要ありません。 これは純粋なパンダソリューションです:

import pandas as pd 

df = [] 
df.append(dict(date='2016-04-01', sleep=11.2, calories=2740)) 
df.append(dict(date='2016-04-02', sleep=7.3, calories=3600)) 
df.append(dict(date='2016-04-03', sleep=8.3, calories=3500)) 

df = pd.DataFrame(df) 

def highlight_last_row(s): 
    return ['background-color: #FF0000' if i==len(s)-1 else '' for i in range(len(s))] 

s = df.style.apply(highlight_last_row) 

enter image description here

+0

ブラウザ(Webアプリケーションのクライアント側)に表示すると、これは機能しますか?また、エンドユーザーに表示する際に、一番左の列の0,1,2などを削除することも可能です。ありがとう! –

関連する問題