Question

我有一个表，它最初会在列中隐藏一些（历史）数据。当我打印表格时，会打印隐藏的数据。这很好。当我单击历史记录列中的show-history链接时，该表会展开并显示隐藏的数据。如果我然后打印此视图，我会得到隐藏的数据。这是理想的。但是，当我单击hide-history链接然后打印时，我没有得到隐藏的数据。这不好！

这是我的showHide javascript

function showHide(shID) {
if (document.getElementById(shID)) {
  if (document.getElementById(shID+'-show').style.display != 'none') {
     document.getElementById(shID+'-show').style.display = 'none';
     document.getElementById(shID).style.display = 'block';
  }
  else {
     document.getElementById(shID+'-show').style.display = 'inline';
     document.getElementById(shID).style.display = 'none';
  }
}
}

在我的jsp中：

 <a href="#" id="cID${comment.comment_id}-show" class="showLink" onclick="showHide('cID${comment.comment_id}');return false;">show history</a>

<TBODY id="cID${comment.comment_id}" class="more">
 .... hidden content
 <a href="#" id="cID${comment.comment_id}-hide" class="hideLink" onclick="showHide('cID${comment.comment_id}');return false;">hide history</a>
 </TBODY>

StyleScreen.css

.more {
  display: none;
}

StylePrint.css（这个和其他尝试设置TBODY样式的尝试都不起作用）

.more {
  display: block;
}

Answer 1

您的JavaScript将以内联方式设置（隐藏/显示）元素。拥有media="screen"和media="print"的两个css文件无效。

你需要（在“屏幕”css中）：

.more {
    display: none;
}

.more.show {
    display: block;
}

...并使用JS，改为改变元素的类（添加/删除“show”）。

Answer 2

由于您将.more的内联样式更改为display:none，因此该样式优于StylePrint.css中定义的样式的特异性。这意味着，您无法使用StylePrint.css中的声明覆盖内联样式。

修复：

尝试使用.more从document.getElementById(shID).style.display = '';删除内嵌样式。

这应该默认.more返回hidden状态，并允许您在处于打印模式时使用StylePrint.css覆盖隐藏状态。

打印时设置要显示内联的元素，该元素设置为无

2 个答案: