gpt4 book ai didi

jquery - 单击按钮显示表格

转载 作者:太空宇宙 更新时间:2023-11-04 01:16:50 24 4
gpt4 key购买 nike

这是我的代码

  <script>
$(document).ready(function(){
$("button").click(function(){
$("table").toggle();
});
});
</script>

<!--Technical Specifications Button Code-->

<div class="w3-center">
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px; margin-bottom:64px">TECHNICAL SPECIFICATIONS</button>
</div>

<!--Technical Specifications Table Design-->

<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color: white;
border-radius: 25px;
}
th, td {
padding: 5px;
}
th {
text-align: center;
}
</style>
</head>

<!--Technical Specifications Table-->

<table class="table table-hover" style="width:100%">

我不知道我是否应该在我的风格中使用“display:none”,或者我是否应该制作一个允许隐藏和取消隐藏代码的函数。我希望这尽可能简单,对我的代码进行最少的修改。

最佳答案

display: none 可以很好地在开始时隐藏您的表格。参见示例:

$(document).ready(function() {
$("button").click(function() {
$("table").toggle();
});
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
background-color: white;
border-radius: 25px;
}

th,
td {
padding: 5px;
}

th {
text-align: center;
}

#t1 {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-center">
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px; margin-bottom:64px">TECHNICAL SPECIFICATIONS</button>
</div>

<table class="table table-hover" style="width:100%" id="t1">
<tr>
<td>hi</td>
</tr>
</table>

关于jquery - 单击按钮显示表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49959188/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com