初学Html5+CSS之网页的增删（隔行变色）

关注

原创最新推荐文章于 2026-08-29 16:44:08 发布 608 阅读 AI 写同款· GEO 优化 ›

纯CSS实现教育时间轴与技能网格：语义化HTML+Flex/Grid实战 HTML语义化是现代网页开发的基础概念，它通过恰当的标签（如article、dl、time）赋予内容可访问性与结构意义；CSS布局原理则决定信息如何被视觉组织——Flexbox适用于一维线性流（如垂直时间轴），Grid擅长二维网格分布（如响应式技能标签）。这种组合不仅提升代码可维护性与SEO表现，更带来真正的技术价值：无需JavaScript即可实现无障碍、高保真、跨设备一致的交互体验。典型应用场景包括个人作品集、技术简历、企业官网模块等静态信息展示。本文聚焦教育背景与技能模块的零框架纯CSS落地，深入解析阅读详情

效果图如下

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 600px;
border: solid 1px;
text-align: center;
display: none;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("table")[0].style.display = "block";
var name = $("#name").val();
var age = $("#age").val();
var birth = $("#birth").val();
var tr=$("<tr>");
var td1 = $("<td>").html(name);
var td2 = $("<td>").html(age);
var td3 = $("<td>").html(birth);
var td4 = $("<td><button>删除</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("tbody").append(tr);//tr--->tbody
$("tbody tr:odd").css("background-color", "red");
$("tbody tr:even").css("background-color", "yellow");
$("td button").click(function() {
$(this).parent().parent().remove();
$("tbody tr:odd").css("background-color", "red");
$("tbody tr:even").css("background-color", "yellow");
var trs = $("tbody").children("tr");
if(trs.length == 0) {
$("table")[0].style.display = "none";
}
});

});
});
</script>
</head>

<body>
姓名:<input id="name" />
年龄:<input id="age" />
生日:<input id="birth" />
<input type="button" value="添加" id="add" />
<table border="1px solid">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>删除</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>

</html>