如何在文本和表格之间切换？
我已经弄清楚如何在文本之间切换，但无法找到如何在文本和表格之间切换。我需要做什么才能在单击按钮时将文本更改为表格并将表格更改为文本？
我试过将 html 插入到 js 函数中
<!DOCTYPEhtml>
<body>
<script>
function home() {
var x = document.getElementById('myid') const home = "home";
if (x.innerHTML !== home) {
x.innerHTML = home
} else {
x.innerHTML = home
}
}
function percentages() {
var x = document.getElementById('myid') const percent = "percent";
if (x.innerHTML !==
percent) {
x.innerHTML = percent;
} else {
x.innerHTML = percent;
}
}
</script>
<div>
<nav>
<ul>
<li>
<p><button onclick="home()">Home</button></p>
</li>
<li>
<p><button onclick="percentages()">Percentages</button></p>
</li>
</ul>
</nav>
<div id="myid">home</div>
</div>
<table style="width:100%">
<tr>
<th>Level</th>
<th>How many levels</th>
</tr>
<tr>
<td>4+</td>
<td><input id="4p" type="levels" placeholder="number of levels"></td>
</body>
</html>
红糖糍粑1回答
-
慕莱坞森
<!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>Js Fiddle 这里https://jsfiddle.net/vsdbL614/
随时随地看视频慕课网APP
相关分类
JavaScript