使用jquery动态添加的css打印html表[重复]

Question

我有一个表，我在其中进行了一些计算，最后使用 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>