Как скрыть / удалить заголовок страницы печати из таблицы данных jquery? [Дубликат]

Question

Как скрыть / удалить заголовок страницы печати из таблицы данных jquery? [Дубликат]

Я подозреваю, что кто-то только начинает переходы CSS быстро обнаруживает, что они не работают, если вы одновременно модифицируете свойство display (block / none). Одна работа, о которой еще не упоминалось, заключается в том, что вы можете продолжать использовать display: block / none, чтобы скрыть / показать элемент, но установить его непрозрачность в 0, чтобы даже когда он отображается: блок, он все еще невидим. Затем, чтобы угаснуть его, добавьте еще один класс CSS, такой как «on», который устанавливает непрозрачность в 1 и определяет переход для непрозрачности. Как вы могли себе представить, вам придется использовать JavaScript, чтобы добавить этот класс «on» к элементу, но по крайней мере вы все еще используете CSS для фактического перехода.

P.S. Если вы окажетесь в ситуации, когда вам нужно сделать как отображение: блок, так и добавить класс «включено», в то же время отложить последнее, используя setTimeout. В противном случае браузер просто видит, что происходит одновременно, и отключает переход.

345

php jquery

задан 9 revs, 5 users 50%sourav 14 October 2015 в 11:14

9 ответов

Другие вопросы по тегам:

php jquery

Похожие вопросы:

score 5 · Answer 1

Вы можете поместить ссылку в div, а затем использовать JavaScript в теге привязки, чтобы скрыть div при нажатии. Пример (не проверенный, возможно, нуждается в настройке, но вы получите идею):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

Недостатком является то, что после нажатия кнопки кнопка исчезает, и они теряют эту опцию на странице (всегда есть Ctrl + P хотя).

Лучшим решением было бы создать таблицу стилей печати, и в этой таблице стилей указывается скрытый статус идентификатора printOption (или того, что вы называете). Вы можете сделать это в разделе заголовка HTML и указать вторую таблицу стилей с медиа-атрибутом.

score 114 · Answer 2

Bootstrap 3 имеет свой собственный класс для этого , который называется:

hidden-print

Он определяется следующим образом:

@media print {
  .hidden-print {
    display: none !important;
  }
}

У вас нет чтобы определить его самостоятельно.

В Bootstrap 4 это изменилось на:

.d-print-none

score 156 · Answer 3

Лучшей практикой является использование таблицы стилей специально для печати и установка ее атрибута media в print.

В ней отображать / скрывать элементы, которые вы хотите распечатать на бумаге.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

156

ответ дан 2 revs, 2 users 80% 28 August 2018 в 10:30

1

– Steve Perks 29 December 2008 в 18:54
2

– Pete 3 September 2009 в 12:58
3

– Arve Systad 3 September 2009 в 16:51

score 12 · Answer 4

Вот простое решение поместить этот CSS

<style>
@media print{
   .noprint{
       display:none;
   }
}

и вот HTML

<div class="noprint">
    element that need to be hide when printing
</div>
<div class="noprint">
    element that need to be hide when printing
</div>

12

ответ дан 3 revs, 2 users 97% 28 August 2018 в 10:30

1

– Nick F 1 August 2017 в 16:55
2

– Nesar Nori 11 April 2018 в 07:06

score 606 · Answer 5

В вашей таблице стилей добавить:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Затем добавьте class='no-print' (или добавьте класс no-print в существующий оператор класса) в свой HTML, который вы не хотите отображать в печатной версии, такой как ваша кнопка. Я получил это, чтобы работать с noPrint вместо noprint (нижний регистр).

606

ответ дан 6 revs, 5 users 52% 28 August 2018 в 10:30

1

– Codeguy007 16 November 2012 в 23:39
2

– luschn 21 February 2013 в 12:21
3

– Philipp 9 April 2013 в 18:17
4

– Clint Pachl 27 May 2013 в 22:56
5

– chiccodoro 30 August 2013 в 13:42

score 5 · Answer 6

Лучше всего сделать это, чтобы создать версию страницы только для печати.

Ой, подождите ... это уже не 1999 год. Используйте CSS для печати с «display: none».

5

ответ дан Jay R 28 August 2018 в 10:30

1

– annakata 23 December 2008 в 16:50
2

– Steve Perks 29 December 2008 в 18:50
3

– recursive 7 May 2012 в 22:53

score 3 · Answer 7

@media print {
  .no-print {
    visibility: hidden;
  }
}

<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

3

ответ дан Mike Rapadas 28 August 2018 в 10:30

score 1 · Answer 8

Принятый ответ от diodus не работает для некоторых, если не для всех нас. Я не мог по-прежнему скрывать свою кнопку «Печать этой кнопки» от выхода на бумагу.

Небольшая настройка Clint Pachl на вызов css-файла путем добавления в

      media="screen, print"

, а не только

      media="screen"

решает эту задачу. Поэтому для ясности и потому, что не легко увидеть, как Clint Pachl скрывает дополнительную помощь в комментариях. Пользователь должен включать «, печатать» в файле css с желаемым форматированием.

     <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">

, а не только по умолчанию media = «screen».

    <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">

That i думаю, решает эту проблему для всех.

score 10 · Answer 9

CSS FILE

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML HEADER

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMENT

<div class="no-print"></div>