EDITED: первый уже был решен, но это проект, над которым я работал, тот, который я удалил, был просто тестом, в любом случае ответ на предыдущий пост до того, как я отредактировал это, был решен, я применил то же решение, но не может решить проблему. может кто-нибудь сказать мне разницу, почему это не будет работать по сравнению с предыдущим, спасибо :).
<!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>
🤔 А знаете ли вы, что...
JavaScript поддерживает работу с различными форматами данных, такими как JSON и XML.
По умолчанию большинство (афаик) браузеров отключают фон при печати html. В хроме после нажатия кнопки и появления диалога печати нажмите "дополнительные настройки" -> "фоновая графика"
Добавьте правило @media
в файл CSS.
@media print {
.print-para {
background-color: #ff0000;
}
}
добавить этот класс при печати нажатием кнопки
$('#btnChange').click(function() {
$('body').addClass('print-para');
window.print();
});
Включите фоновое отображение в настройках предварительного просмотра в браузере.
Print Preview > More Settings > Background Graphics