学生信息卡案例
<!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>学生信息案例</title>
<script src="./jquery-3.5.1.min.js"></script>
<style>
.add{
border:0px;
width: 60px;
height: 35px;
background-color: lightgreen;
border-radius: 10px; /*设置圆角*/
color:#fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px; /*设置字符间距*/
cursor: pointer;
}
</style>
</head>
<body>
<button class="add">添加</button>
<table width="600" border="1" cellspacing="0" id="hgc">
<caption><h1>学生信息</h1></caption>
<tr height="45">
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>操作</th>
</tr>
</table>
<script>
$(function(){
var i = 1
// 给按钮绑定单击事件 获取按钮的标签 click()
$('.add').click(function(){
// alert('出发了单击事件')
var tr = `<tr height="35">
<td><input type="checkbox"></td>
<td>${i}</td>
<td>张三</td>
<td>男</td>
<td>2000-12-11</td>
<td><a class="hsc">删除</a></td>
</tr>`
var trObj=$(tr)
trObj.appendTo($('table'))
i++
})
$('#hgc').on('click','.hsc',function(){
$(this).parents('tr').remove()
})
})
</script>
</body>
</html>
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
