我已经弄清楚如何在文本之间切换，但无法找到如何在文本和表格之间切换。我需要做什么才能在单击按钮时将文本更改为表格并将表格更改为文本？
我试过在js函数中插入html
<!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>最佳答案
<!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/
关于javascript - 如何在文本和表格之间切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58657961/