javascript - 为特定元素计数在打印时创建分页符
问题描述
我正在制作一个进行基本财务计算的应用程序。我想格式化我的应用程序的打印页面之一。
我有一个摊销表,可以打印表格中的行,当我去打印它时,一些行重叠到下一页并且不容易看到。
我想为表格中生成的一些“n”行创建一个分页符,以便格式看起来更好。这是目前的样子。
这是HTML:
<!-- ===== ===== ===== ===== ===== = Body = ===== ===== ===== ===== ===== -->
<body>
<nav class="noprint moveup">
<ul>
<li><a href="../../HTML/Primary/index.html">Home</a></li>
<li><a class="currentLink" href="#">Amortization Table</a></li>
<li><a href="../../HTML/Secondary/Income Estimator.html">Income Estimator</a></li>
<li><a href="../../HTML/Secondary/Expenses.html">Expenses Estimator</a></li>
</ul>
</nav>
<div class="body">
<div class="container">
<div class="center">
<h3 class="noprint">Enter Loan Data Here</h3>
<input type="number" placeholder="$ Loan" id="Amount">
<input type="number" min="0.01" placeholder="% APR" id="Rate">
<input type="number" placeholder="# Months " id="Months">
</div>
</div>
<table class="topmargin pagebreak" id="Amortization">
<tr>
<th>Months Remaining</th>
<th>Monthly Payment</th>
<th>Principal Paid</th>
<th>Interest Paid</th>
<th>Remaining Balance</th>
</tr>
</table>
<div class="Outcomes">
<p id="Loan">Your Original Loan Was: </p>
<p id="MonthsTotal">Your Loan Lasted For: </p>
<p id="RateTotal">Your Annual APR Was: </p>
</div>
<div class="container1">
<div class="center1">
<button type="button" id="Calculate" onclick="Calculate()">Calculate</button>
<button type="button" id="Remove" onclick="Remove()">Clear</button>
<button type="button" id="Print" onclick="window.print()">Print</button>
</div>
</div>
</div>
<div class='ripple-background'>
<div class='circle xxlarge shade1'></div>
<div class='circle xlarge shade2'></div>
<div class='circle large shade3'></div>
<div class='circle mediun shade4'></div>
<div class='circle small shade5'></div>
</div>
<!-- - - - - - - - - - - - Page Content Ends Here - - - - - - - - - - - - - -->
以及当前页面的 JavaScript:
// Interest rate function
function Rate() {
// Get interest rate from user
var rate = document.getElementById("Rate").value;
var monthly = 1.0 / 12.0;
rate /= 100;
rate = Math.pow(1 + rate, monthly) - 1.0;
return rate;
}
// Monthly payment
function MonthPay() {
// Get remaining loan amount from user
var amount = document.getElementById("Amount").value;
// Get remaining months from user
var months = document.getElementById("Months").value;
// Monthly Rate
var monthRate = Rate();
// Montly pay amount
var monthPay = amount * monthRate / (1 - Math.pow(1 + monthRate, -months));
return monthPay;
}
// Long Number Formatting
function Format(num) {
return (
num
.toFixed(2) // always two decimal digits
.replace(',', '.') // replace decimal point character with ,
.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') // use , as a separator
)
}
/* Function that actually ammortizes the loan */
function Calculate() {
// Disable Button so it can only be clicked once
document.getElementById("Calculate").disabled = true;
document.getElementById("Calculate").style.visibility = "hidden";
// Collect Months Remaining from user for the for loop to end
var months = document.getElementById("Months").value;
// Collect Amount Remaining from user to be put in table
var remaining = document.getElementById("Amount").value;
// Get ID for table from HTML file
var table = document.getElementById("Amortization");
// Insert a default row from here:
var Entry = table.insertRow(1);
var col0 = Entry.insertCell(0);
var col1 = Entry.insertCell(1);
var col2 = Entry.insertCell(2);
var col3 = Entry.insertCell(3);
var col4 = Entry.insertCell(4);
col0.innerHTML = months;
col1.innerHTML = "-";
col2.innerHTML = "-";
col3.innerHTML = "-";
col4.innerHTML = "$" + Format(Math.abs(remaining));
// -----> to here
// For loop that will do the calculating for each additional row and column
for (i = 1; i <= months; i++) {
// Interest that is paid monthly
var interest = remaining*Rate();
// Principal paid monthly
var principal = Math.abs(MonthPay()) - interest;
// Remaining Payment
remaining -= principal;
var Entry = table.insertRow(i + 1);
var col0 = Entry.insertCell(0);
var col1 = Entry.insertCell(1);
var col2 = Entry.insertCell(2);
var col3 = Entry.insertCell(3);
var col4 = Entry.insertCell(4);
col0.innerHTML = (months - i);
col1.innerHTML = "$" + Format(Math.abs(MonthPay()));
col2.innerHTML = "$" + Format(principal);
col3.innerHTML = "$" + Format(interest);
col4.innerHTML = "$" + Format(Math.abs(remaining));
}
// Final Row Entry
var finalEntry = table.insertRow(-1);
var col0Final = finalEntry.insertCell(0);
var col1Final = finalEntry.insertCell(1);
var col2Final = finalEntry.insertCell(2);
var col3Final = finalEntry.insertCell(3);
var col4Final = finalEntry.insertCell(4);
// Final Row Totals
var monthsFinal = 0;
var paymentFinal = 0;
var principalPaid = 0;
var interestPaid = 0;
var totalPaid = 0;
for (var i = 2; i < table.rows.length-1; i++) {
principalPaid += parseFloat(table.rows[i].cells[2].innerHTML.replace('$','').replace(',',''));
interestPaid += parseFloat(table.rows[i].cells[3].innerHTML.replace('$','').replace(',',''));
}
// Final Row Columns
col0Final.innerHTML = "Total Months: " + months;
col1Final.innerHTML = "Monthly Payment: $" + Format(Math.abs(MonthPay()));
col2Final.innerHTML = "Total Principal Paid: $" + Format(Math.round(principalPaid));
col3Final.innerHTML = "Total Interest Paid: $" + Format(interestPaid);
col4Final.innerHTML = "Total Amount Paid: $" + Format(Math.round(principalPaid) + interestPaid);
var loanTotal = document.getElementById("Amount").value;
var monthsTotal = document.getElementById("Months").value;
var interestTotal = document.getElementById("Rate").value;
document.getElementById("Loan").innerHTML += "$" + loanTotal;
document.getElementById("MonthsTotal").innerHTML += monthsTotal + " Months";
document.getElementById("RateTotal").innerHTML += interestTotal + "%";
}
/* Function to clear table */
function Remove() {
location.reload();
}
/* Enter press detection */
$(document).keypress(function(e) {
if(e.which == 13) {
document.getElementById("Calculate").click();
}
});
/* CMD or CTRL + P detection */
$(document).keydown(function(e) {
if((e.metaKey || e.ctrlKey) && e.key === 'p') {
document.getElementById("Print").click();
}
});
/* CMD or CTRL + Backspace detection */
$(document).keydown(function(e) {
if((e.metaKey || e.ctrlKey) && e.keyCode == 8) {
document.getElementById("Remove").click();
}
});
和CSS:
/* Classes to center content in containers */
body {
margin-top: 10px;
margin-bottom: 10px;
}
.body {
position: relative; top: -300px;
}
h3 {
visibility: hidden;
}
.Outcomes {
position: relative; left: 0%;
visibility: visible;
}
.topmargin {
margin-top: 50px;
}
.input-field {
position: relative; top: -100px;
}
.container {
position: relative; height: 100px;
left: 33%;
}
.center {
width: 100%;
margin: 0; position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Input Styling */
input[type=number] {
width: 150px;
float: left;
padding: 12px 20px 12px 40px;
}
/* Table styling */
#Amortization {
font-family: Arial;
border-collapse: collapse; width: 100%;
margin-left: auto; margin-right: auto;
margin-bottom: 50px; margin-top: 100px;
}
#Amortization td, #Amortization th {
border: 1px solid rgb(0, 0, 0);
padding: 8px;
}
#Amortization th {
padding-top: 12px; padding-bottom: 12px;
text-align: center; color: black;
}
tr, th, td {
text-align: center; font-size: small;
height: 10px;
}
/* Button */
button, input {
visibility: hidden;
}
.noprint {
visibility: hidden;
}
任何帮助是极大的赞赏!
解决方案
推荐阅读
- javascript - 提交后刷新 twitter 引导表单向导
- java - Java 将图像文件缩小到目标文件大小
- excel - 我收到运行时错误“438”:对象不支持此属性或方法
- java - 使用未声明的依赖项
- c++ - C ++:指针向量对更改没有反应
- python - 使用累积模式为 original_str 中的单词创建单词长度列表
- java - 如何在java中创建带有特定图像的保存文件?
- javascript - 如何设置 api-platform react-admin graphql 堆栈?
- c# - 缺少程序集引用和/或指令“找不到类型或命名空间名称”
- python - 有没有办法将值以数组形式插入到表中?