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

最新推荐文章于 2022-05-22 17:07:35 发布

原创最新推荐文章于 2022-05-22 17:07:35 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了初学者如何使用HTML5和CSS进行网页内容的增删，并展示了实现表格隔行变色的效果。通过实例代码解析，帮助读者掌握基本的网页制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

<!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>