Fatal编程技术网
  • html/
  • Html 应用<；后无法保留表格的格式；tr id="；“字符串”；隐藏>；

Html 应用<；后无法保留表格的格式；tr id="；“字符串”；隐藏>；

html

Html 应用<；后无法保留表格的格式；tr id="；“字符串”；隐藏>；,html,html-table,hidden,Html,Html Table,Hidden,因此，我有一个代码，目前的工作方式是 <!DOCTYPE html> <html> <head> </head> <body> <div id="Editorial"> <table> <tr> <th style="border-right:solid 1px"><p id="Editorial01"><font color="red"&

因此，我有一个代码，目前的工作方式是

    <!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>






鉴于




---------
+
---------




这始终是一个共同点

但它并不总是最不常见的

应用B x D的公分母

欢迎来到这个节目的分数部分

我们将继续努力

A&frasl；B+C&frasl；D





继续

函数Script0（）{
var x=document.getElementById（“Section_0”）；
x、 style.display='none'；
var x=document.getElementById（“第1节”）
x、 style.display='block'
}


请告诉我你在添加什么？
**安置事宜**
A&frasl；B+C&frasl；D
---------
+
---------




继续

函数Script1（）{
var a=document.getElementById（“绝对值”）.value；
var b=document.getElementById（“绝对值b”）.value；
var c=document.getElementById（“绝对值”）.value；
var d=document.getElementById（“绝对”）.value；
如果（（a==parseInt（a））&&（b==parseInt（b））&&（c==parseInt（c））&&（d==parseInt（d））&&（d！=0）&（b！=0））{
document.getElementById（“Editorial01”）.innerHTML=（“所以我们有“+a+”/“+b+”+“+c+”/“+d”）；
document.getElementById（“Editorial02”）.innerHTML=（“A=“+A+”C=“+C”）
document.getElementById（“Editorial03”）.innerHTML=（“B=“+B+”D=“+D”）
var x=document.getElementById（“第1节”）；
x、 style.display='none'；
var x=document.getElementById（“第2节”）
x、 style.display='block'
var x=document.getElementById（“EditorialFirst”）
x、 style.display='block'}
否则{
document.getElementById（“FAILEDHERE”）.innerHTML=（“请输入有效值”）
}
}
这里是我的问题：我希望一次只显示表的一部分，所以我想我可以为每个表设置一个ID并隐藏它们。但是，当我显示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>






鉴于




---------
+
---------




这始终是一个共同点

但它并不总是最不常见的

应用B x D的公分母

欢迎来到这个节目的分数部分

我们将继续努力

A&frasl；B+C&frasl；D





继续

函数Script0（）{
var x=document.getElementById（“Section_0”）；
x、 style.display='none'；
var x=document.getElementById（“第1节”）
x、 style.display='block'
}


请告诉我你在添加什么？
**安置事宜**
A&frasl；B+C&frasl；D
---------
+
---------




继续

函数Script1（）{
var a=document.getElementById（“绝对值”）.value；
var b=document.getElementById（“绝对值b”）.value；
var c=document.getElementById（“绝对值”）.value；
var d=document.getElementById（“绝对”）.value；
如果（（a==parseInt（a））&&（b==parseInt（b））&&（c==parseInt（c））&&（d==parseInt（d））&&（d！=0）&（b！=0））{
document.getElementById（“Editorial01”）.innerHTML=（“所以我们有“+a+”/“+b+”+“+c+”/“+d”）；
document.getElementById（“Editorial02”）.innerHTML=（“A=“+A+”C=“+C”）
document.getElementById（“Editorial03”）.innerHTML=（“B=“+B+”D=“+D”）
var x=document.getElementById（“第1节”）；
x、 style.display='none'；
var x=document.getElementById（“第2节”）
x、 style.display='block'
var x=document.getElementById（“EditorialFirst”）
x、 style.display='block'