<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
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">
<caption>
<h1>学生信息</h1>
</caption>
<tr height="45">
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>操作</th>
</tr>
<!--<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>2000-12-11</td>
<td>删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>张三</td>
<td>男</td>
<td>2000-12-11</td>
<td>删除</td>
</tr> -->
</table>
<script>
$(function() {
var i = 1
$('.add').click(function() {
var tr = `<tr height="35">
<td><input type="checkbox"></td>
<td>${i}</td>
<td>张三</td>
<td>男</td>
<td>2000-12-11</td>
<td>删除</td>
</tr>`
var trObj = $(tr)
trObj.appendTo($('table'))
i++
})
})
</script>
</body>
</html>
1482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
