Невозможно сохранить формат таблицы после применения - PullRequest
Новая
       24

Невозможно сохранить формат таблицы после применения

0 голосов
/ 23 мая 2018

Итак, у меня есть код, который в настоящее время работает как есть. 

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="Editorial">
<table>
    <tr>
        <th style="border-right:solid 1px"><p id="Editorial01"><font color="red"></th>
        <th style="border-right:solid 1px"><p id="Editorial02"><font color="red"></p><p id="Editorial03"><font color="red"></p></th>
        <th>Given</th>
    </tr>
    <tr>
        <th style="border-right:solid 1px">
            <table>
                <tr>
                    <th><p id="EditorialAD"></th>
                    <th></th>
                    <th><p id="EditorialBC"></th>
                </tr>
                <tr>
                    <th>---------</th>
                    <th>+</th>
                    <th>---------</th>
                </tr>
                <tr>
                    <th><p id="EditorialBD1"></th>
                    <th></th>
                    <th><p id="EditorialBD2"></th>
            </table>
        </th>
        <th style="border-right:solid 1px">
            <p>This will always make a common denominator</p>
            <p>but it will not always be the least common denominator</p>
        </th>
        <th>
            <p>Apply Common Denominators of B x D</p>
        </th>
</table>
</div>
<div id="Section_0">
    <p>Welcome to the Fraction Section of this program<font size=6></p>
    <p>We will be working on <font size=6></p>
    <p> <sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<sub>D</sub><p><font size=6></p>
    <p></p>
    <p></p>
    <button onclick="Script0()" id="button1" size=6>Proceed</button><p></p>
    </div>
        <script>
            function Script0(){
                var x = document.getElementById("Section_0");
                    x.style.display = 'none';
                var x = document.getElementById("Section_1")
                    x.style.display = 'block'
            }
        </script>
<div id="Section_1" hidden>
    <p><font size=4></p>
    Please tell me what you are adding?<p>
    **Placement Matters**<p>
    <sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<sub>D</sub><p>

<table>
    <tr>
        <th><input type="text" id="AbsoluteA" size=3 placeholder="A"></th>
        <th></th>
        <th><input type="text" id="AbsoluteC" size=3 placeholder="C"></th>
    </tr>
    <tr>
        <th>---------</th>
        <th>+</th>
        <th>---------</th>
    </tr>
    <tr>
        <th><input type="text" id="AbsoluteB" size=3 placeholder="B"></th>
        <th></th>
        <th><input type="text" id="AbsoluteD" size=3 placeholder="D"></th>
</table>
    <p></p>
    <p id="FAILEDHERE"></p>
        <button onclick="Script1()" id="button2">Proceed</button><p></p>
    </div>
        <script>
            function Script1(){
                var a = document.getElementById("AbsoluteA").value;
                var b = document.getElementById("AbsoluteB").value;
                var c = document.getElementById("AbsoluteC").value;
                var d = document.getElementById("AbsoluteD").value;
                if ((a == parseInt(a)) && (b == parseInt(b)) && (c == parseInt(c)) && (d == parseInt(d)) && (d != 0) && (b != 0)){
                    document.getElementById("Editorial01").innerHTML = ("So we have "+a+"/"+b+" + "+c+"/"+d);
                    document.getElementById("Editorial02").innerHTML = ("A="+a+" C="+c) 
                    document.getElementById("Editorial03").innerHTML = ("B="+b+" D="+d)
                    var x = document.getElementById("Section_1");
                        x.style.display = 'none';
                    var x = document.getElementById("Section_2")
                        x.style.display = 'block'
                    var x = document.getElementById("EditorialFirst")
                        x.style.display = 'block'               }
                else {
                    document.getElementById("FAILEDHERE").innerHTML = ("Please input valid values please")
                }
            }
        </script>

Вот моя проблема: я хотел, чтобы одновременно отображались только части таблицы, поэтому я решил, что могу установить идентификатор вкаждый и прятать их.Однако, когда я раскрываю 1, это выглядит нормально.Когда я раскрываю второе, форматирование испорчено.

Вопрос: Как я могу использовать скрытое, чтобы скрыть отдельное лицо и раскрыть его, не разрушая общий формат?

Это версия того, что я хочу, но не сохраняет формат 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="Editorial">
<table>
    <tr id="EditorialFirst" hidden>
        <th style="border-right:solid 1px"><p id="Editorial01"><font color="red"></th>
        <th style="border-right:solid 1px"><p id="Editorial02"><font color="red"></p><p id="Editorial03"><font color="red"></p></th>
        <th>Given</th>
    </tr>
    <tr id="EditorialSecond" hidden>
        <th style="border-right:solid 1px">
            <table>
                <tr>
                    <th><p id="EditorialAD"></th>
                    <th></th>
                    <th><p id="EditorialBC"></th>
                </tr>
                <tr>
                    <th>---------</th>
                    <th>+</th>
                    <th>---------</th>
                </tr>
                <tr>
                    <th><p id="EditorialBD1"></th>
                    <th></th>
                    <th><p id="EditorialBD2"></th>
            </table>
        </th>
        <th style="border-right:solid 1px">
            <p>This will always make a common denominator</p>
            <p>but it will not always be the least common denominator</p>
        </th>
        <th>
            <p>Apply Common Denominators of B x D</p>
        </th>
</table>
</div>
<div id="Section_0">
    <p>Welcome to the Fraction Section of this program<font size=6></p>
    <p>We will be working on <font size=6></p>
    <p> <sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<sub>D</sub><p><font size=6></p>
    <p></p>
    <p></p>
    <button onclick="Script0()" id="button1" size=6>Proceed</button><p></p>
    </div>
        <script>
            function Script0(){
                var x = document.getElementById("Section_0");
                    x.style.display = 'none';
                var x = document.getElementById("Section_1")
                    x.style.display = 'block'
            }
        </script>
<div id="Section_1" hidden>
    <p><font size=4></p>
    Please tell me what you are adding?<p>
    **Placement Matters**<p>
    <sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<sub>D</sub><p>

<table>
    <tr>
        <th><input type="text" id="AbsoluteA" size=3 placeholder="A"></th>
        <th></th>
        <th><input type="text" id="AbsoluteC" size=3 placeholder="C"></th>
    </tr>
    <tr>
        <th>---------</th>
        <th>+</th>
        <th>---------</th>
    </tr>
    <tr>
        <th><input type="text" id="AbsoluteB" size=3 placeholder="B"></th>
        <th></th>
        <th><input type="text" id="AbsoluteD" size=3 placeholder="D"></th>
</table>
    <p></p>
    <p id="FAILEDHERE"></p>
        <button onclick="Script1()" id="button2">Proceed</button><p></p>
    </div>
        <script>
            function Script1(){
                var a = document.getElementById("AbsoluteA").value;
                var b = document.getElementById("AbsoluteB").value;
                var c = document.getElementById("AbsoluteC").value;
                var d = document.getElementById("AbsoluteD").value;
                if ((a == parseInt(a)) && (b == parseInt(b)) && (c == parseInt(c)) && (d == parseInt(d)) && (d != 0) && (b != 0)){
                    document.getElementById("Editorial01").innerHTML = ("So we have "+a+"/"+b+" + "+c+"/"+d);
                    document.getElementById("Editorial02").innerHTML = ("A="+a+" C="+c) 
                    document.getElementById("Editorial03").innerHTML = ("B="+b+" D="+d)
                    var x = document.getElementById("Section_1");
                        x.style.display = 'none';
                    var x = document.getElementById("Section_2")
                        x.style.display = 'block'
                    var x = document.getElementById("EditorialFirst")
                        x.style.display = 'block'               }
                else {
                    document.getElementById("FAILEDHERE").innerHTML = ("Please input valid values please")
                }
            }
        </script>
<div id="Section_2" hidden>
    As part of the Initial Math Phase<p>
    We are going to quote "cross multiply"<p>
    but it is actually just creating equivalent <p>
    fractions with a common denominator <p> 
    **THIS MAY NOT LEAST COMMON DENOMINATOR BUT IT IS A COMMON DENOMINATOR**<p>
    <p id="FAILED"><font size=4></p>
    <table>
    <tr>
        <th><input type="text" id="AbsoluteAD" size=3 placeholder="A x D"></th>
        <th></th>
        <th><input type="text" id="AbsoluteBC" size=3 placeholder="B x C"></th>
    </tr>
    <tr>
        <th>---------</th>
        <th>+</th>
        <th>---------</th>
    </tr>
    <tr>
        <th><input type="text" id="AbsoluteBD1" size=3 placeholder="B x D"></th>
        <th></th>
        <th><input type="text" id="AbsoluteBD2" size=3 placeholder="B x D"></th>
</table>
    <p></p>
    <p></p> 
    <button onclick="Script2()" id="button3">Proceed</button><p></p>
    </div>
        <script>
            function Script2(){
                var a = document.getElementById("AbsoluteA").value;
                var b = document.getElementById("AbsoluteB").value;
                var c = document.getElementById("AbsoluteC").value;
                var d = document.getElementById("AbsoluteD").value;
                var numone = a*d;
                var numtwo = b*c;
                var denone = b*d;
                var AD = document.getElementById("AbsoluteAD").value;
                var BC = document.getElementById("AbsoluteBC").value;
                var BD1 = document.getElementById("AbsoluteBD1").value;
                var BD2 = document.getElementById("AbsoluteBD2").value;
                if (BD1 == BD2 && (parseInt(BD1) == parseInt(BD2)) && (BD1 == denone)){
                    var BD = parseInt(BD1)
                }
                if ((numone == AD) && (numtwo == BC) && (denone == BD)) {
                    var x = document.getElementById("Section_2");
                        x.style.display = 'none';
                    var y = document.getElementById("Section_3")
                        y.style.display = 'block';
                    document.getElementById("EditorialAD").innerHTML = (+AD)
                    document.getElementById("EditorialBC").innerHTML = (+BC)
                    document.getElementById("EditorialBD1").innerHTML = (+BD2)
                    document.getElementById("EditorialBD2").innerHTML = (+BD2)
                    var x = document.getElementById("EditorialSecond")
                        x.style.display = 'block'   
                } else {
                    document.getElementById("FAILED").innerHTML = ("Try Again")
                }
            }
        </script>
...