JQuery 作业
完成商品信息表的信息全选、全不选、反选操作
每行信息后对应修改、删除、提交修改功能,
点击修改文本框可以进行输入,点击提交文本框不能输入,点击删除,删除这一行的信息
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选全不选反选</title>
<style>
th{
font-weight: bold;
text-align: center;
}
button{
background-color: greenyellow;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>
<button id="allchoose">全选</button>
<button id="notallchoose">全不选</button>
<button id="reseverchoose">反选</button>
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td><input type="text" disabled="disabled" value="1"></td>
<td><input type="text" disabled="disabled" value="手机数码"></td>
<td><input type="text" disabled="disabled" value="手机数码类商品"></td>
<td><a href="#" class="update">修改</a>|<a href="#" class="delete">删除</a>|<a href="#" class="commit">提交修改</a></td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td><input type="text" disabled="disabled" value="2"></td>
<td><input type="text" disabled="disabled" value="电脑办公"></td>
<td><input type="text" disabled="disabled" value="电脑办公商品"></td>
<td><a href="#" class="update">修改</a>|<a href="#" class="delete">删除</a>|<a href="#" class="commit">提交修改</a></td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td><input type="text" disabled="disabled" value="3"></td>
<td><input type="text" disabled="disabled" value="鞋靴箱包"></td>
<td><input type="text" disabled="disabled" value="鞋靴箱包商品"></td>
<td><a href="#" class="update">修改</a>|<a href="#" class="delete">删除</a>|<a href="#" class="commit">提交修改</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="4"></td>
<td><input type="text" disabled="disabled" value="家居饰品"></td>
<td><input type="text" disabled="disabled" value="家居饰品商品"></td>
<td><a href="#" class="update">修改</a>|<a href="#" class="delete">删除</a>|<a href="#" class="commit">提交修改</a></td>
</tr>
</table>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
var allcheckbox=$(":checkbox");//获取所有checkbox对象
//全选
$("#allchoose").click(function(){
allcheckbox.each(function(index,element){
$(element).prop("checked",true);//全选就把所有的checkbox的checked属性值设为true
})
})
//全不选
$("#notallchoose").click(function(){
allcheckbox.each(function(index,element){
$(element).prop("checked",false);//全不选就把所有的checkbox的checked属性值设为false
})
})
//反选
$("#reseverchoose").click(function(){
allcheckbox.each(function(index,element){
$(element).prop("checked",!$(element).prop("checked"));//内层先获取每个checkbox的checked属性值把他们置反即true为false;false为true,
//把新的属性值重新设置给checked
})
})
//删除这一整行
$(".delete").each(function(index,element){
$(element).attr("href","javascript:void(0);");//a标签不进行跳转
$(element).click(function(){//点击事件
$(this).parents("tr").remove();//获取当前点击的元素的父元素,然后删除自身
})
})
//修改这一行
$(".update").each(function(index,element){
$(element).attr("href","javascript:void(0);");
$(element).click(function(){
$(this).parents("tr").find("input[type='text']").each(function(index,element){//获取当前点击的元素的父元素,找到该元素下的所有为text类型的input对象
$(element).attr("disabled",false);//设置每个input标签的disabled属性值为false,即可对文本框进行输入
})
})
})
//提交修改
$(".commit").each(function(index,element){
$(element).attr("href","javascript:void(0);");
$(element).click(function(){
$(this).parents("tr").find("input[type='text']").each(function(index,element){//获取当前点击的元素的父元素,找到该元素下的所有为text类型的input对象
$(element).attr("disabled",true);//设置每个input标签的disabled属性值为true,文本框不可输入
})
})
})
</script>