[英]How to hide and show table by click on button?
Here is my index.html
file:这是我的
index.html
文件:
<button id="getAllGroups" type="button" class="btn btn-primary">Groups</button>
<div class="container">
<h2 align="center">LESSONS</h2>
<table class="table table-dark" border="1" width="100%" cellpadding="5">
<thead>
<th>GROUP ID</th>
<th>GROUP NAME</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
Below my js
file:在我的
js
文件下面:
GET: $(document).ready(
function () {
// GET REQUEST
$("#getAllGroups").click(function (event) {
event.preventDefault();
ajaxGet();
});
// DO GET
function ajaxGet() {
$.ajax({
type: "GET",
url: "checkGroups",
success: function (result) {
if (result.status == "success") {
var custList = "";
$.each(result.data,
function (i, group) {
var Html = "<tr>" +
"<td>" + group.groupId + "</td>" +
"<td>" + group.groupName + "</td>" +
"</tr>";
console.log("Group checking: ", group);
$('#tbody').append(Html);
});
console.log("Success: ", result);
} else {
console.log("Fail: ", result);
}
},
});
}
})
RestController:休息控制器:
@RestController
public class GroupController {
@Autowired
GroupService groupService;
@GetMapping("/checkGroups")
public ResponseEntity<Object> getAllGroups() {
ServiceResponse<List<Group>> response = new ServiceResponse<>("success", groupService.getAll());
return new ResponseEntity<Object>(response, HttpStatus.OK);
}
}
My code works but th
: GROUP ID and GROUP NAME is on page even if I don't click on button Groups
but I need that my table shows only after click on button.我的代码有效,
th
:即使我没有单击按钮Groups
,组 ID 和组名也在页面上,但我需要我的表仅在单击按钮后显示。 If I don't click on button, the table should be hidden.如果我不点击按钮,表格应该被隐藏。
Thanks in advance for responding.提前感谢您的回复。
I need that my table shows only after click on button.
我需要我的表格仅在单击按钮后显示。 If I don't click on button, the table should be hidden.
如果我不点击按钮,表格应该被隐藏。
In this case, hide the table when the page loads using CSS and display it when the button is clicked using show()
:在这种情况下,使用 CSS 在页面加载时隐藏表格,并在使用
show()
单击按钮时显示它:
.container table { display: none; }
// in the $.ajax success handler:
let html = result.data.map(g => `<tr><td>${g.groupId}</td><td>${g.groupName}</td></tr>`;
$('#tbody').append(html);
$('.container table').show();
Note the simplified and more performant use of map()
to build your HTML in the above sample.请注意在上面的示例中使用
map()
来构建您的 HTML 的简化且性能更高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.