用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>