如何再次停止打印？ （HTML，JavaScript）

时间：2018-03-21 20:57:11

标签： javascript html

此代码用于打印表格并且工作正常，但问题是，当我点击打印表格按钮时，它会打印表格但是当我再次点击它时它再次打印在下面的同一个表中我希望它在再次给出新的输入值之前不再工作。一旦它应该打印表，然后不要给出新的值。我也希望它更具响应性。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <title>Multiplication Table</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
    box-sizing: border-box;
}
</style>

</head>
<body>

<h2>MultiplicationTable</h2

<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>

<br><br>    



   

<button id="again" onclick="myTable()">Print Table</button>

<br><br>

<button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>

<tr>

<button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>

<br><br>

 <!-- <table class="table table-bordered table-striped table-hover"  id="displayTables">

</table> -->

<table class="table" id="displayTables" border="0">
<tr></tr>

</table>

<!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>

</table> -->

<!-- <p id="MT"></p> -->
 

<script>

          
// function myFunction()
// {
// var text = "";
// var Number = document.getElementById("TN").value;
// var T;
// var I = document.getElementById("IN").value;
// var E = document.getElementById("EN").value;

// for (T = I; T <= E; T++) {


//      text += Number + "*" + T + "=" + Number*T + "<br>"; 

// }


// document.getElementById("MT").innerHTML = text;
// }

 // function generateTable()
 //    {
 //     //var myVar = prompt("A number?", "");
 //     var myVar = document.forms.multTables.x.value;
 //     var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
 //     for (i=1; i<=myVar; i++) 
 //     {
 //        myString += "<tr><td>";
 //       myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
 //       myString += "</td></tr>";
 //     }
 //     document.getElementById('t').innerHTML = myString;
 //     return false;
 //    }

function myTable()
{

var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp="";
for (T = I; T <= E; T++) {
temp+="<tr><td>"+Number+"</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number*T +"</td></tr>"; 
}

$("#displayTables").append(temp);


}

  function Bordertoggle() {
            	var element = document.getElementById("displayTables");
            element.classList.toggle("table-bordered");
                var change = document.getElementById("Bordertoggle");
                if (change.innerHTML == "Add Alternate Row Style")
                {
                    change.innerHTML = "Remove Alternate Row Style";
                }
                else {
                    change.innerHTML = "Add Alternate Row Style";
                }
            }

function Hovertoggle() {
   var element = document.getElementById("displayTables");
   element.classList.toggle("table-hover");
    var change = document.getElementById("Hovertoggle");
                if (change.innerHTML == "Add Hover Effect")
                {
                    change.innerHTML = "Remove Hover Effect";
                }
                else {
                    change.innerHTML = "Add Hover Effect";
                }
}
    
</script>




</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

为你的ajavascript添加一个var，比如

printed = 0;

打印完表后，执行

printed = 1;

仅打印

if ( printed == 0 )
    ....print

编辑：     

printed=0; 
......
if(printed==0) { 
    $("#displayTables").append(temp); 
    printed=1; 
}

答案 1 :(得分：0)

只需将当前值保存在变量中，当下次用户点击检查时，如果值匹配，则不打印，否则打印。

var prevN, prevI, prevE;   //store value in this variable of previous state

function myTable() {

    var Number = document.getElementById("TN").value;
    var T;
    var I = document.getElementById("IN").value;
    var E = document.getElementById("EN").value;
    var temp = "";
    if (prevN !== Number || prevE !== E || prevI !== I) {  //here check if value is changed  or not
        prevN = Number;
        prevE = E;
        prevI = I;
        for (T = I; T <= E; T++) {
            temp += "<tr><td>" + Number + "</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number * T + "</td></tr>";
        }

        $("#displayTables").append(temp);
    }

}

function Bordertoggle() {
    var element = document.getElementById("displayTables");
    element.classList.toggle("table-bordered");
    var change = document.getElementById("Bordertoggle");
    if (change.innerHTML == "Add Alternate Row Style") {
        change.innerHTML = "Remove Alternate Row Style";
    } else {
        change.innerHTML = "Add Alternate Row Style";
    }
}

function Hovertoggle() {
    var element = document.getElementById("displayTables");
    element.classList.toggle("table-hover");
    var change = document.getElementById("Hovertoggle");
    if (change.innerHTML == "Add Hover Effect") {
        change.innerHTML = "Remove Hover Effect";
    } else {
        change.innerHTML = "Add Hover Effect";
    }
}
<!DOCTYPE html>
<html>

<head>
    <title>Multiplication Table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <style>
        .mystyle {
            width: 100%;
            padding: 25px;
            background-color: coral;
            color: white;
            font-size: 25px;
            box-sizing: border-box;
        }
    </style>

</head>

<body>

    <h2>MultiplicationTable</h2 <form action>
    Table Number:<br>
    <input type="text" id="TN" name="TableNumber">
    <br> Initial Number:<br>
    <input type="text" id="IN" name="InitialNumber">
    <br> Ending Number:<br>
    <input type="text" id="EN" name="EndingNumber">
    </form>

    <br><br>





    <button id="again" onclick="myTable()">Print Table</button>

    <br><br>

    <button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>

    <tr>

        <button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>

        <br><br>

        <!-- <table class="table table-bordered table-striped table-hover"  id="displayTables">

</table> -->

        <table class="table" id="displayTables" border="0">
            <tr></tr>

        </table>

        <!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>

</table> -->

        <!-- <p id="MT"></p> -->

</body>

</html>

相关问题
最新问题