Javascript 如何在文本和表格之间切换？_Javascript_Html_Css_Frontend

Javascript 如何在文本和表格之间切换？

javascript html css

Javascript 如何在文本和表格之间切换？,javascript,html,css,frontend,Javascript,Html,Css,Frontend,我已经知道了如何在文本和表格之间切换，但却不知道如何在文本和表格之间切换。我需要做什么才能将文本更改为表格，并在单击按钮时将表格更改为文本我尝试过将html插入js函数函数home（）{ var x=document.getElementById（'myid'）const home=“home”；如果（x.innerHTML！==home）{ x、 innerHTML=home }否则{ x、 innerHTML=home } } 函数百分比（）{ var x=document.get

我已经知道了如何在文本和表格之间切换，但却不知道如何在文本和表格之间切换。我需要做什么才能将文本更改为表格，并在单击按钮时将表格更改为文本

我尝试过将html插入js函数


函数home（）{
var x=document.getElementById（'myid'）const home=“home”；
如果（x.innerHTML！==home）{
x、 innerHTML=home
}否则{
x、 innerHTML=home
}
}
函数百分比（）{
var x=document.getElementById（'myid'）const percent=“percent”；
如果（x.html==
（百分比）{
x、 innerHTML=百分比；
}否则{
x、 innerHTML=百分比；
}
}


家


百分比


家
水平仪
多少层
4+


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.show text”）.toggleClass（“显示表格”）；
});
});
.显示文本p{
显示：块
}
.显示文本表{
显示：无
}
.show-text.show-table p{
显示：无
}
.show-text.show-table表格{
显示：块
}
任何文本
1.
2.
3.
1.
2.
3.
1.
2.
3.
切换

Js Fiddle Here

您的HTML存在一些严重问题。

元素是必需的。DOCTYPE声明中缺少空格。

表

遗漏了一个结束标记

。没有理由在这里使用jQuery，问题没有标记为jQuery，OP也没有要求它。除此之外，在StackOverflow上不赞成使用外部代码引用，除非Stacksnippet功能对于您想要呈现的代码是不够的。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".show-text").toggleClass("show-table");
  });
});
</script>

<style>
.show-text p{
    display: block
}
.show-text table{
    display: none
}

.show-text.show-table p{
    display: none
}
.show-text.show-table table{
    display: block
}
</style>
</head>
<body>

<div class="show-text">
        <p>any text</p>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>


<button>toggle</button>

</body>
</html>