20171218

最新推荐文章于 2017-12-28 20:50:00 发布

qunzhaoshen

最新推荐文章于 2017-12-28 20:50:00 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/qunzhaoshen/article/details/78834948

版权

今天学习了jquery 主要介绍了什么是jquery 以及优点的体现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body align="center">
序号:<input type="text" id="xh"/></p>
姓名:<input type="text" id="xm"/></p>
专业:<input type="text" id="zy"/></p>
年龄:<input type="text" id="nl"/></p>
<button type="button" id="addNewTr"/>点击生成新行</button>
<button type="button" id="plDelete"/>删除</button>
<table id="dataTable" border="1" cellspacing="0" align="center">
<tr>
<td><input type="checkbox" id="zxk"/></td>
<td>序号</td>
<td>姓名</td>
<td>专业</td>
<td>年龄</td>
</tr>
</table>
<script type="text/javascript">
$("#addNewTr").click(function(){
var table = $("#dataTable");
var xhvalue = $("#xh").val();
var xmvalue = $("#xm").val();
var zyvalue = $("#zy").val();
var nlvalue = $("#nl").val();
/* var cols = $(".singleChe"); */
var newTr = "<tr><td><input type='checkbox' class='singleChe'></td><td>"+xhvalue+"</td><td>"+xmvalue+"</td><td>"+zyvalue+"</td><td>"+nlvalue+"</td></tr>";
table.append(newTr);
});
$("#zxk").click(function(){
if($(this).prop("checked") == true){
$(".singleChe").prop("checked",true);
/*alert("选中"); */
}else{
$(".singleChe").prop("checked",false);
/*alert("未选中");*/
}
});
$("#plDelete").click(function(){
var checkedCols = $(".singleChe:checked");
checkedCols.each(function(index,elem){
var $_elem = $(elem);
var $_tr = $_elem.parent().parent();
$_tr.remove();
})
});

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