Jquery基本的表格操作

2024-01-29 12:16:40

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全选、全不选
$(document).ready(function () {
$("#ckAll").click(function () {
//prop()
$(".ck").prop("checked",this.checked);
})
//添加
$("#add").click(function () {
//获取文本框的value值
var stuName=$("#stuName").val();
var stuClass=$("#stuClass").val();
var stuScore=$("#stuScore").val();
var str="<tr>";
str+="<td><input type='checkbox' class='ck'/></td>";
str+="<td>"+stuName+"</td>";
str+="<td>"+stuClass+"</td>";
str+="<td>"+stuScore+"</td>";
str+="<td><input type='button' value='删除' onclick='del(this)'/></td>"
str+="</tr>";
$("#tb").append(str);
})
})

//删除
function del (t) {
$(t).parent().parent().remove();
}
</script>
</head>
<body>
姓名：
<input type="text" id="stuName"/><br />
班级：
<input type="text" id="stuClass"/><br />
分数：
<input type="text" id="stuScore"/><br />
<input type="button" id="add" value="添加" />

<table id="tb" border="1" cellspacing="0" cellpadding="5" width="60%">
<tr>
<td><input type="checkbox" id="ckAll"/>全选/全不选</td>
<td>姓名</td>
<td>班级</td>
<td>分数</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" class="ck"/></td>
<td>张三</td>
<td>应用4班</td>
<td>99</td>
<td><input type="button" value="删除" onclick="del(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" class="ck"/></td>
<td>张三</td>
<td>应用4班</td>
<td>99</td>
<td><input type="button" value="删除" onclick="del(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" class="ck"/></td>
<td>张三</td>
<td>应用4班</td>
<td>99</td>
<td><input type="button" value="删除" onclick="del(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" class="ck"/></td>
<td>张三</td>
<td>应用4班</td>
<td>99</td>
<td><input type="button" value="删除" onclick="del(this)"/></td>
</tr>
</table>
</body>
</html>

上一篇：jMeter 结果报表里的 90 pct，95 pct 和 99 pct 的含义


下一篇：C打印99乘法表