<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
width: 120px;
height: 60px;
text-align: center;
}
.checkbox {
width: 800px;
display: flex;
justify-content: space-between;
}
.checkbox input {
width: 20px;
height: 20px;
}
.checkbox label {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="table">
<table border="1" id="tab"></table>
</div>
<div class="checkbox"></div>
<script>
//多选框勾选的一共有这些
let checkList = ["日期", "姓名", "省份", "市区", "地址", "邮编"];
//多选框个数一共有这些
let checkListAll = ["date", "name", "province", "city", "address", "zip"];
let tableData = [
{
date: "2016-05-02",
name: "王一虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
},
{
date: "2016-05-04",
name: "王二虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1517 弄",
zip: 200333,
},
{
date: "2016-05-01",
name: "王三虎",
province: "上海",
city: "普陀区&#
JS控制表格列的显示隐藏
最新推荐文章于 2024-02-20 13:39:50 发布
本文介绍如何使用Vue.js动态控制HTML表格中列的显示和隐藏,包括基本的JavaScript操作和Vue实例的应用。
摘要由CSDN通过智能技术生成