h5 table添加删除 隔行换色

  
  
  

<!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" />&nbsp;&nbsp;
年龄:<input type="number" id="age" name="age" />&nbsp;&nbsp;
生日:<input type="date" id="birthday" name="birthday" />&nbsp;&nbsp;
<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>
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭