编辑：第一个已经解决，但这是我一直在致力于删除的项目，只是一个测试，无论如何，在我解决此问题之前，上一篇文章的答案得到解决，我应用了相同的解决方案，但似乎无法解决问题。有人可以告诉我为什么与上一个相比不起作用的原因，谢谢：）。
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="src/jquery.timepicker.min.css">
<script src="src/jquery.timepicker.min.js"></script>
</head>
<style>
@media print {
.active {
background-color: #ff0000;
}
}
.card-default {
color: #333;
background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent;
font-weight: 600;
border-radius: 6px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
.signature {
border: 0;
border-bottom: 1px solid #000;
}
.active {
background-color: #ff0000;
}
input {
text-align: center;
}
</style>
<script type="text/javascript">
var total = 0;
var meal_allow_table = document.getElementsByClassName("meal_allow");
var days = [];
$(document).ready(function() {
$("table").find("input").attr("disabled", true);
$('input[name="inlineRadioOptions"]').change(function () {
$("table").find("input").removeAttr("disabled");
if ($('#pay_period_from').prop('checked')) {
$('.first-period').addClass('active');
$('.second-period').removeClass('active');
}else if ($('#pay_period_to').prop('checked')) {
$('.second-period').addClass('active');
$('.first-period').removeClass('active');
}
});
});
function printForm() {
window.print();
}
</script>
<body>
<div class="container">
<div id="accordion">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h3>LINA GROUP OF COMPANIES</h3>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="glyphicon glyphicon-search text-gold"></i>
<b>Meal and Overtime Authorization Form</b>
</a>
</h4>
</div>
<div id=hideDiv>
<form action="index.php" method="POST">
<div id="collapse1" class="collapse show">
<div class="card-body">
<div class="row">
<div class="col-md-3 col-lg-6">
<div class="form-group">
<label class="control-label">Company:</label>
<input id="inputCompany" name="company" type="text" class="form-control" />
</div>
</div>
<div class="col-md-1 col-lg-4">
<!-- <div class="form-group">
<label class="control-label">Dept/Location:</label>
<input type="text" class="form-control" />
</div> -->
</div>
</div>
<div class="row">
<!-- <div class="col-md-2 col-lg-3">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" />
</div>
</div> -->
<div class="col-md-2 col-lg-6">
<div class="form-group">
<label class="control-label">Pay Period:</label>
<div class="row">
<div class="form-check col-lg-2"></div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_from" value="option1">
<label class="form-check-label" for="inlineRadio1">Day 1 - 15 </label>
</div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_to" value="option2">
<label class="form-check-label" for="inlineRadio2">Day 16 - 31 </label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-success btn-lg" type="submit" name="btnSubmit" id="btnSubmit"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-success btn-lg" type="submit" name="btnPrint" id="btnPrint" onclick="printForm()"><i class="fa fa-save"></i> Print</button>
<a class="btn btn-warning btn-lg" href="#" id="btnToTop"><i class="fa fa-arrow-up"></i> Top</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="div">
<table class="table" style="width:100%">
<tr>
<th colspan="2" rowspan="3" style="vertical-align: middle;" >Date</th>
<th colspan="2" style="vertical-align: middle;">OT Field</th>
<th rowspan="3" style="vertical-align: middle;">Purpose of Overtime</th>
<th rowspan="3" style="vertical-align: middle;">OT hours</th>
<th rowspan="3" style="vertical-align: middle;">Meal Allow</th>
<th rowspan="3" style="vertical-align: middle;">Boss</th>
</tr>
<tr>
<th colspan="2">() rarbk & file ()</th>
</tr>
<tr>a
<th style="max-width: 40px">From</th>
<th style="max-width: 40px">To</th>
</tr>
<tr>
<td colspan="2">December</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width:10%" class="first-period">1</td>
<td style="width: 10%" class="second-period">16</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="first-period">2</th>
<td class="second-period">17</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="textarea" style="width: 100%; height: 50px;">
</td>
<td class="ot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="boss" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="total"><b>TOTAL</b></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="total"></td>
<td></td>
</tr>
</table>
<div style="margin-top: 15px" class="footer">
<p>Note: Pls Encircle corresponding meal allowance and always indicate covered pay period.</p>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
答案 0 :(得分：2)
默认情况下，大多数浏览器（afaik）在打印html时都会禁用背景。在Chrome浏览器中，单击按钮后出现打印对话框，然后单击“更多设置”->“背景图形”
答案 1 :(得分：0)
向CSS文件添加@media规则
@media print {
.print-para {
background-color: #ff0000;
}
}
在打印点击按钮时添加此类
$('#btnChange').click(function() {
$('body').addClass('print-para');
window.print();
});
在浏览器的打印预览设置中启用背景显示
Print Preview > More Settings > Background Graphics