一. 跨列:
<!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>
<!--
单元格合并分成两种情况:
-- 跨列合并: 使用colspan ==> 在最左边的单元格写上colspan属性,colspan='要跨的列数',并且要把原来的td 要去掉;
-- 跨行合并: 使用rowspan ==> 在最上面的单元格协商rowspan属性,rowspan='要跨的行数' ,并且要把原来的tr中的td去掉;
-->
<style>
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid #333;
padding: 10px 20px;
}
</style>
</head>
<body>
<!-- 1. 确定 谁 需要跨行或者跨列 -->
<!-- 2. 确实是跨 行 还是跨列 -->
<!-- 3. 跨几行或者几列 -->
<table>
<tr>
<td colspan="2">1-1</td>
<!-- <td>1-2</td> -->
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
</body>
</html>
实际截图
image.png
二.跨行
<!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>
<!--
单元格合并分成两种情况:
-- 跨列合并: 使用colspan ==> 在最左边的单元格写上colspan属性,colspan='要跨的列数',并且要把原来的td 要去掉;
-- 跨行合并: 使用rowspan ==> 在最上面的单元格协商rowspan属性,rowspan='要跨的行数' ,并且要把原来的tr中的合并的当前td去掉;
-->
<style>
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid #333;
padding: 10px 20px;
}
</style>
</head>
<body>
<!-- 1. 确定 谁 需要跨行或者跨列 -->
<!-- 2. 确实是跨 行 还是跨列 -->
<!-- 3. 跨几行或者几列 -->
<table>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<!-- <td>2-1</td> -->
<td>2-2</td>
</tr>
</table>
</body>
</html>
实际截图
image.png
三.表格合并练习
<!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;
text-align: center;
}
td{
width: 120px;
height: 40px;
border: 1px solid #f00;
padding: 10px 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6">课程表</td>
</tr>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td rowspan="2">晚自习</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
</table>
</body>
</html>
实际截图
image.png
四. 在表格中循环,当表格中有开关切换或者复选框选中的时候,会遇到一个问题, 就是循环的时候要是绑定的id循环出来的是一样的话,你在切换开关或者复选框的时候, 就所有的切换都在联动选中,这种的话就会出现问题
image.png
把 id改为动态的就可以了: <input type="checkbox" v-model="item.status" :id="item.id" />
<!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>
<script src="./js/vue.js"></script>
<style>
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid #333;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="app">
<label for="ipt">
品牌名称<input
type="text"
placeholder="请输入品牌名称"
v-model.trim="addValue"
/>
</label>
<button @click="add">添加一条数据</button>
<table v-if="list.length > 0" style="margin-top: 20px">
<thead>
<td>序号</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>
<input type="checkbox" v-model="item.status" :id="item.id" />
<label :for="item.id">{{ item.status ? '启用':'禁用' }}</label>
</td>
<td>{{ item.time }}</td>
<td>
<button @click="deleteItem(item,index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2 v-else>列表暂无数据</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
addValue: "",
addId: 4,
list: [
{ id: 1, name: "宝马", status: true, time: new Date() },
{ id: 2, name: "奔驰", status: false, time: new Date() },
{ id: 3, name: "奥迪", status: true, time: new Date() },
],
},
methods: {
deleteItem(item) {
this.list = this.list.filter((itez) => itez.id !== item.id);
console.log(this.list);
},
add() {
if (!this.addValue) return alert("请先填写品牌");
const obj = {
id: this.addId++,
name: this.addValue,
status: this.addId % 2 === 0 ? true : false,
time: new Date(),
};
this.list.push(obj);
this.addValue = "";
},
},
});
</script>
</body>
</html>
网友评论