@media 인쇄에 대한 표 행 숨기기

Question

데이터 표가 있으며 각 행에는 사용자가 해당 행을 인쇄 된 표에 포함 시키길 원하는 체크 표시가 있습니다. 행을 선택하면 JQuery와는에 인쇄 클래스를 추가합니다

$("td .checkbox").click(function(e){ 
    if (this.checked) { 
     $("#tr-"+this.id).addClass("print"); 
    } else { 
     $("#tr-"+this.id).removeClass("print"); 
    } 
}); 

편집 : 아래의 답변에 대한 ID와 클래스를 보여주기 위해 HTML을 추가 ...

<tr id="tr-print-0" class="search-line-item-0 print"> 
    <td>data</td> 
    <td>data...</td> 
    <td><input type="checkbox" id="print-0" name="print-0"></td> 
</tr> 
<tr id="tr-print-1" class="search-line-item-1">... 
<tr id="tr-print-2" class="search-line-item-0">... 

그런 다음 내 CSS 파일에 내가 가진 행의 표시를 none 또는 block으로 설정하는 @media print {}. 사용자가 페이지를 디스플레이 행만 인쇄 할 때

tr.search-line-item-0, tr.search-line-item-1 { 
    display: none; 
} 

tr.search-line-item-0.print, tr.search-line-item-1.print { 
    display: block; 
} 

문제가있다 : 블록 표시, 의도 된 동작이지만, 각각의 행은 첫 번째 열 (제 <th> 스팬 내부 렌더링되는 것 같습니다 <tr> 다음으로 다른 모든 <th>에는 그 아래에 아무 것도 없습니다. 지금까지 Chrome과 Firefox에서만 테스트되었으며 두 브라우저 모두에서 문제가 동일합니다.

목표는 다른 창을 열거 나 iframe을 사용하지 않고 행을 확인하고 인쇄하는 빠른 방법입니다. 그래서 아무도 작동하는 대체 솔루션을 알고 있다면 :)

Answer 1

는 테이블의 행으로 일반 렌더링을 얻을 수 display: table-row을 설정합니다.

Answer 2

선택자가 CSS와 자바 스크립트 사이에서 일치합니다. 귀하의 자바 스크립트에서 ID로 행을 호출하고있는 CSS에서 당신은 클래스와 행을보고 있습니다. 대신 display: block을 설정

$("td .checkbox").click(function(e){ 
    var $row = $("tr.search-line-item-"+this.id); 
    if (this.checked) { 
     $row.addClass("print"); 
    } else { 
     $row.removeClass("print"); 
    } 
});