Fatal编程技术网
  • javascript/
  • Javascript 为特定元素计数在打印时创建分页符

Javascript 为特定元素计数在打印时创建分页符

javascript html css

Javascript 为特定元素计数在打印时创建分页符,javascript,html,css,Javascript,Html,Css,我正在做一个应用程序，做基本的财务计算。我想格式化我的应用程序的打印页面之一 我有一个摊销表，它可以打印表中的行，当我打印它时，有些行会重叠到下一页，不容易看到 我想在打印时为表中生成的一些“n”行创建一个分页符，以便格式看起来更好。以下是目前的情况 以下是HTML： <!-- ===== ===== ===== ===== ===== = Body = ===== ===== ===== ===== ===== --> <body> <nav clas

我正在做一个应用程序，做基本的财务计算。我想格式化我的应用程序的打印页面之一

我有一个摊销表，它可以打印表中的行，当我打印它时，有些行会重叠到下一页，不容易看到

我想在打印时为表中生成的一些“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 - - - - - - - - - - - - - -->
非常感谢您的帮助

// 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();
  }
  });


/* 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;
  }