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

Posted 2023-03-06

【中文标题】使用jquery动态添加的css打印html表[重复]

【英文标题】：print html table with css dynamically added by jquery [duplicate]

【发布时间】：2017-11-03 14:11:27

【问题描述】：

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

提前致谢！

【问题讨论】：

我知道，这可能很奇怪 - 但可能是您的打印设置不好？

【参考方案1】：

写你的CSS在样式标签中添加media="print"，这将只适用于打印部分

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