How do I hide an element when printing a web page?

Dreal1

Member
Joined
Apr 27, 2017
Messages
10
Programming Experience
Beginner
[FONT=&quot]Greetings my fellow Programmers, i am have issues in terms of hiding and element when printing from my index..... I will like to hide the Edit,Delete and Details column when print, but i am not getting it .... Please i need your help and below is my code...[/FONT]
[FONT=&quot]// the part i want to hide[/FONT]
[FONT=&quot]
[/FONT]

[FONT=&quot]// I want to hide this part from printing!!![/FONT]
[FONT=&quot]<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]
[FONT=&quot]@Html.ActionLink("Edit", "Edit", new { id = item.QalificationtId })|@Html.ActionLink("Details", "Details", new { id = item.QalificationtId })|@Html.ActionLink("Delete", "Delete", new { id = item.QalificationtId })
</td>[/FONT]

[FONT=&quot]
[/FONT]

[FONT=&quot]
[/FONT]

[FONT=&quot]// the full code[/FONT]
[FONT=&quot]<p>
@Html.ActionLink("Add Staff Qualification", "Create")| <a onclick="printDiv('div1')" href="javascript:void(0)">Print</a>
</p>[/FONT]

[FONT=&quot]<div id="div1" style="overflow:scroll; width:100%;">
<table class="table">
<caption class="caption"> Staff Qualification Table </caption>
<thead style=" text-align:center; background-color:#ffffff; border-left:thin; border-right:thin; border-bottom:thin; border-color:aliceblue; border-width:thin; ">[/FONT]

[FONT=&quot]<tr style=" background-color: black; color: white; text-align: center; border-bottom: 1px dashed #999;">[/FONT]
[FONT=&quot]<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]
[FONT=&quot]Name of School Attendented
</th>
<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]Qualification
</th>
<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]Year
</th>
<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
Staff Name
</th>
<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]Department
</th>
<th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]<th></th>
</tr>[/FONT]

[FONT=&quot]@foreach (var item in Model)
{
<tr style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width:thin; border-left: 1px dashed #999; ">[/FONT]

[FONT=&quot]<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]
[FONT=&quot]@Html.DisplayFor(modelItem => item.School)
</td>
<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]@Html.DisplayFor(modelItem => item.Qualification)
</td>
<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]@Html.DisplayFor(modelItem => item.Year)
</td>
<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]@Html.DisplayFor(modelItem => item.Staff.Surname) @Html.DisplayFor(modelItem => item.Staff.Firstname)
</td>
<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]

[FONT=&quot]@Html.DisplayFor(modelItem => item.Department.DeptName)
</td>

[/FONT]

[FONT=&quot]// I want to hide this part from printing!!![/FONT]
[FONT=&quot]<td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">[/FONT]
[FONT=&quot]@Html.ActionLink("Edit", "Edit", new { id = item.QalificationtId })|@Html.ActionLink("Details", "Details", new { id = item.QalificationtId })|@Html.ActionLink("Delete", "Delete", new { id = item.QalificationtId })
</td>
</tr>
}[/FONT]

[FONT=&quot]</table>
<script>
function printDiv(printcontent) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printcontent).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
</div>[/FONT]
 

JohnH

C# Forum Moderator
Staff member
Joined
Apr 23, 2011
Messages
1,184
Location
Norway
Programming Experience
10+
Top Bottom