h5 table添加删除隔行换色

最新推荐文章于 2024-07-17 10:45:16 发布

吨吨吨吨吨吨吨

最新推荐文章于 2024-07-17 10:45:16 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Sylkeel/article/details/80317867

本文介绍了如何在HTML5（H5）中创建表格（table），并实现动态添加和删除行的功能，同时展示了如何设置样式，使表格隔行呈现不同颜色，增强视觉效果。

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

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
/*隔行变色*/
table tr:nth-child(odd){
background-color: #f00;
}
table tr:nth-child(even){
background-color: blue;
}
</style>
</head>
<body>
<center>
姓名：<input type="text" id="name" name="name" />  
年龄：<input type="number" id="age" name="age" />  
生日：<input type="date" id="birthday" name="birthday" />  
<input type="button" value="添加" onclick="add()" /><br /><br />

<table cellspacing="0" cellpadding="5" border="1" id="tb">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>删除</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>1995-04-23</td>
<td><input type="button" value="删除" onclick="removeTr(this)"/></td>
</tr>
<tr>
<td>李思</td>
<td>33</td>
<td>1989-03-22</td>
<td><input type="button" value="删除" onclick="removeTr(this)"/></td>
</tr>
<tr>
<td>王武</td>
<td>22</td>
<td>1999-04-09</td>
<td><input type="button" value="删除" onclick="removeTr(this)"/></td>
</tr>
</table>

</center>
<script>
/*
* 添加
*/

function add(){
var name = $("#name").val();
var age = $("#age").val();
var birthday = $("#birthday").val();
//alert(name+age+birthday);
$("#tb").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+birthday+"</td><td><input type='button' value='删除' onclick='removeTr(this)'/></td></tr>")
/*
* 显示
*/
var my_length = document.getElementById("tb").rows.length;
if(my_length>1){
$("#tb").show();
}
}
/*
* 删除
*/
function removeTr(a){
a.parentNode.parentNode.remove();

var my_length = document.getElementById("tb").rows.length;

//alert(my_length);
//隐藏
if(my_length<=1){
$("#tb").hide();
}
}
</script>
</body>
</html>