jquery基础

来源：互联网发布：软件工程硕士全日制编辑：程序博客网时间：2024/06/07 02:59

<html>
<head>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
序号:<input type="text" id="xh" /><br/>
姓名:<input type="text" id="xm" /><br/>
学号:<input type="text" id="xhh" /><br/>
年龄：<input type="text" id="nl" /><br/>
<button type="button" id="add">添加</button>
<button type="button" id="del">删除</button>
<table id="a" border="1" cellspacing="0">
<tr>
<td><input type="checkbox" id="zxh"></td>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
</tr>
</table>

<script type="text/javascript">
$("#add").click(function(){
var xh = $("#xh").val();
var xm = $("#xm").val();
var xhh = $("#xhh").val();
var nl = $("#nl").val();
var newTr = "<tr><td><input type='checkbox' class='ls'></td><td>"+xh+"</td><td>"+xm+"</td><td>"+xhh+"</td><td>"+nl+"</td></tr>";
var table = $("#a");
table.append(newTr);
});

$("#zxh").click(function(){
if($(this).prop("checked") == true){
$(".ls").prop("checked",true);
}else{
$(".ls").prop("checked",false);
}
});
$("#del").click(function(){
var xz = $(".ls:checked");
xz.each(function(index,elem){;
var $_elem = $(elem)
var $_tr = $_elem.parent().parent();
$_tr.remove();
})
});

</script>
</body>
</html>

阅读全文

0 0