JQuery作业

发布于2021-05-30 11:53 阅读(1544) 评论(0) 点赞(24) 收藏(5)

JQuery 作业

文章目录

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>