用jQuery打印html表格動態添加jquery

Question

我有一個表格，我做了一些計算和eventueel使用jquery函數.css（）添加新的css規則（着色表背景）到表格。

現在，當我想打印頁面時，我得到一個沒有任何影響的黑白頁面。

如何在維護表格的同時打印我的表格？

我知道你可以製作特殊的打印樣式表，但我目前還沒有線索如何做到這一點。歡迎任何幫助。

HTML：

<table id='tbl1' style="width:100%"> 
    <tr> 
    <th>Name</th> 
    <th>Location</th> 
    <th>Amount in kg</th> 
    </tr> 
    <tr> 
    <td>Whole wheat</td> 
    <td>Line 1</td> 
    <td>1237</td> 
    </tr> 
    <tr> 
    <td>Whole wheat</td> 
    <td>Line 2</td> 
    <td>1341</td> 
    </tr> 
</table> 

代碼示例

table = $('#tbl1').find('td:nth-child(3)').each(function() { 
    val = parseInt($(this)[0].innerText, 10); 
    if (val > 1300) { 
    $(this).css({"background-color": "green"}); 
    } 
    else { 
    $(this).css({"background-color": "red"}); 
    } 
}); 

這裏是小提琴例如：

https://jsfiddle.net/toofle/jng2h9rp/

提前感謝！

Answer 1

寫你的CSS風格標籤添加media="print"，這將是隻適用於印刷部分

<style media="print"> 
    // your code 
</style>