熊貓數據框to_html：突出顯示錶格行

我使用熊貓to_html函數創建表格，並且希望能夠突出顯示輸出表格的底部行，該行的長度可變。我沒有任何HTML實際經驗可言的，所有我在網上找到了這熊貓數據框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 style=""background-color:#FF0000">（或任何顏色我想），而不是隻是<tr>，但我真的不知道該怎麼做是讓這個發生在我製作的桌子上。我不認爲我可以用to_html函數本身做到這一點，但是在創建表後我該如何做呢？

任何幫助表示讚賞。

來源

2013-08-07 Charles Dillon

您可以使用jQuery做在JavaScript：

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

而且熊貓的較新版本的一類dataframe向表中添加HTML，所以你可以使用過濾掉只大熊貓表：

$('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)

來源

2013-08-07 11:16:18

雖然我認爲你的回答是偉大的人誰具有一定的HTML/JS/CSS的經驗，我覺得有人用HTML的經驗是要找到你的解決方案有點壓倒一切。 –

只是有點......我不明白創建一個班級在這裏做什麼。我正在使用python 2.7.5（包含python（x，y）包中的所有包），並從命令提示符運行文件。我在IPython中運行你的例子並得到，我不知道該怎麼做。謝謝你的全面的反應，但！ @Viktor –

你是否在shell版本的ipython，ipython qtconsole或ipython notebook中運行你的代碼？你究竟想要完成什麼？ –

我不能讓@維克多的「全工作示例」中的IPython（jupyter）工作，因爲最後一行是什麼得到呈現，但移動Javascript行之後的HTML呈現對我來說不起作用。

「純CSS」示例確實有效，我們甚至可以在其中放入Javascript <script>。這使我可以使用https://github.com/christianbach/tablesorter來呈現可排序的Pandas數據幀。

這是一個完整的例子：

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'))

注意，.js文件是本地的。直接引用github原始代碼將不起作用，因爲MIME類型是plain/txt。

更新：我剛剛注意到Pandas v0.17.1發佈了一個功能add style to the DataFrame HTML output。

來源

2015-12-02 22:22:25 paulperry

由於熊貓現在具有造型功能，因此不再需要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)

來源

2016-09-06 11:03:54 volodymyr

當我們在瀏覽器（Web應用程序的客戶端）上顯示它時，這是否工作？另外，當我們向最終用戶顯示時，是否可以移除最左列上的0,1,2等。謝謝！ –

熊貓數據框to_html：突出顯示錶格行

回答

相關問題