2013-08-07 27 views
18

Tôi đang tạo các bảng bằng cách sử dụng hàm pandas to_html và tôi muốn có thể làm nổi bật hàng dưới cùng của bảng được xuất, có độ dài thay đổi. Tôi không có bất kỳ kinh nghiệm thực tế của html để nói chuyện, và tất cả những gì tìm thấy trực tuyến là này Pandas Dataframes to_html: Tô sáng các hàng của bảng

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

Vì vậy, tôi biết rằng hàng thức phải có <tr style=""background-color:#FF0000"> (hoặc bất kỳ màu sắc tôi muốn) chứ không phải là chỉ <tr>, nhưng những gì tôi không thực sự biết làm thế nào để làm là có được điều này xảy ra với các bảng tôi đang làm. Tôi không nghĩ rằng tôi có thể làm điều đó với chức năng to_html, nhưng làm thế nào tôi có thể làm điều đó sau khi bảng đã được tạo ra?

Mọi trợ giúp đều được đánh giá cao.

Trả lời

17

Bạn có thể làm điều đó trong javascript sử dụng jQuery:

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

Ngoài ra phiên bản mới của gấu trúc thêm một lớp dataframe để html bảng để bạn có thể lọc ra chỉ là bảng gấu trúc sử dụng:

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

Nhưng bạn có thể thêm các lớp học của riêng mình nếu bạn muốn:

df.to_html(classes='my_class') 

Hoặc thậm chí nhiều:

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

Nếu bạn đang sử dụng Máy tính xách tay IPython đây là ví dụ làm việc đầy đủ:

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

Hoặc thậm chí bạn có thể sử dụng CSS đơn giản:

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

Khả năng là vô tận :)

Edit: tạo một file 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

Trong khi tôi nghĩ rằng câu trả lời của bạn là rất tốt cho những người có một số HTML/JS/kinh nghiệm CSS, tôi nghĩ rằng ai đó không có kinh nghiệm với HTML đang diễn ra để tìm giải pháp của bạn một chút áp đảo. –

+0

Chỉ một chút ... Tôi không hiểu điều gì đang tạo ra một lớp học đang làm ở đây. Tôi đang sử dụng python 2.7.5 (với tất cả các gói trong gói python (x, y)) và chạy các tệp từ dấu nhắc lệnh. Tôi chạy ví dụ của bạn trong IPython và nhận được , mà tôi không chắc chắn về những gì cần làm. Cảm ơn bạn đã trả lời rất toàn diện! @Viktor –

+0

Bạn có chạy mã của mình trong phiên bản shell của ipython, ipython qtconsole hoặc ipython notebook không? Và chính xác thì bạn đang cố gắng làm gì? –

4

tôi có thể không nhận được @ "đầy đủ ví dụ làm việc" Viktor để làm việc trong ipython (jupyter) vì dòng cuối cùng là những gì được trả lại, nhưng di chuyển hiển thị HTML sau khi dòng Javascript không hoạt động đối với tôi.

Ví dụ "CSS đồng bằng" hoạt động và thậm chí chúng tôi có thể đặt Javascript <script> trong đó. Điều này cho phép tôi hiển thị khung dữ liệu Pandas có thể sắp xếp bằng cách sử dụng https://github.com/christianbach/tablesorter.

Đây là một ví dụ đầy đủ:

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

Lưu ý rằng các tập tin .js là địa phương. Tham chiếu trực tiếp đến mã nguyên github sẽ không hoạt động vì kiểu MIME là plain/txt.

Cập nhật: Tôi vừa nhận thấy rằng Pandas v0.17.1 đã phát hành một tính năng cho add style to the DataFrame HTML output.

17

Kể từ khi gấu trúc có chức năng tạo kiểu ngay bây giờ, bạn không cần phải hack JavaScript nữa. Đây là một giải pháp gấu trúc tinh khiết:

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

Khi chúng tôi hiển thị nó trên trình duyệt (ứng dụng khách của một ứng dụng web), tính năng này có hoạt động không? Ngoài ra, có thể xóa 0,1,2 vv ở cột ngoài cùng bên trái khi chúng tôi hiển thị cho người dùng cuối. Cảm ơn! –

Các vấn đề liên quan