JQuery实现表格选择多个值传到后台

最新推荐文章于 2022-04-21 12:43:58 发布

小心窝

最新推荐文章于 2022-04-21 12:43:58 发布

阅读量1.5k

点赞数 2

分类专栏： Web前端文章标签： JQuery 表格传值

本文链接：https://blog.csdn.net/qq_36430299/article/details/55259306

版权

Web前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

注意观看控制台的输出情况！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>多重选择</title>
    <style>
        .active{
            background: skyblue;
        }
        table{
            border-collapse: collapse;
        }
        .clear{
            clear: both;
        }
        .content{
            margin:20px;
            width: 1300px;
            height:150px;
            background: #F1F1F1;
        }
        .stateDiv{
            padding-top:20px;
        }
        .stateDiv,.themeDiv{
            margin-top:10px;
            padding-left:20px;
        }
        .stateContent,.themeContent{
            width:85%;
        }
        .stateTitle,.stateContent,.themeTitle,.themeContent{
            float: left;
        }
        .stateTable td,.themeTable td{
            padding:0 30px 20px 30px;
            width:70px;
            text-align: center;
        }
        .stateTable td span:hover,.themeTable td span:hover{
            cursor: pointer;
        }
    </style>
    <script src="../frameworks/jquery-2.1.4/jquery-2.1.4.min.js"></script>
    <script>
        $(function(){
            //添加原始的样式背景
            $(".stateTotal").children().addClass("active");
            $(".themeTotal").children().addClass("active");
            var state = "";
            var theme = "";
            $(".state").children().on("click",function(){
                //获取当前时间
                var time = new Date();
                //打印输出当前时间，要传到后台与活动开始的时间进行比较，
                // 选择即将开始或者正在进行的活动给用户看
                var current =
                        (time.getYear()+1900)+"/"+(time.getMonth()+1)+"/"+time.getDate()+
                    " "+time.getHours()+":"+time.getMinutes();
                console.log("当前时间为："+current);
                $(this).addClass("active");
                //输出选择的汉字，便于比较
                console.log($(this).html());
                $(this).parent().siblings().children().removeClass("active");
                //获取时间之后，建议使用ajax异步交互，局部刷新
                state = current;
                console.log("传给后台的state值是："+state+"或者是："+$(this).html());
                $.ajax({
                    url:"",
                    data:{"stateValue":state,"themeValue":theme},
                    success:function(data){
                        //查出来的数据
                    }
                });
            });
            $(".theme").children().on("click",function(){
                $(this).addClass("active");
                //输出选择的汉字，方便去后台拿值
                $(this).parent().siblings().children().removeClass("active");
                $(this).parent().parent().siblings().children().children().removeClass();
                theme = $(this).html();
                console.log("传给后台的theme值是："+theme);
                $.ajax({
                    url:"",
                    data:{"stateValue":state,"themeValue":theme},
                    success:function(data){
                        //查出来的数据
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="content">
        <div class="stateDiv">
            <span class="stateTitle">活动状态：</span>
            <div class="stateContent">
                <table class="stateTable">
                    <tr>
                        <td class="state stateTotal"><span>全部</span></td>
                        <td class="state"><span>即将开始</span></td>
                        <td class="state"><span>正在进行</span></td>
                        <td class="state"><span>已经结束</span></td>
                    </tr>
                </table>
            </div>
            <div class="clear"></div>
        </div>
        <div class="themeDiv">
            <span class="themeTitle">活动主题：</span>
            <div class="themeContent">
                <table class="themeTable">
                    <!--id应该是从后台拿的，
                        名字也是从后台拿的 span标签应该是遍历出来的，这里就写死了-->
                    <tr>
                        <td class="theme themeTotal"><span>全部</span></td>
                        <td class="theme" id="1"><span>其他类别</span></td>
                        <td class="theme" id="2"><span>IT互联网</span></td>
                        <td class="theme" id="3"><span>新材料</span></td>
                        <td class="theme" id="4"><span>新能源</span></td>
                        <td class="theme" id="5"><span>资源环境</span></td>
                        <td class="theme" id="6"><span>纺织服装</span></td>
                        <td class="theme" id="7"><span>食品营养</span></td>
                    </tr>
                    <tr>
                        <td class="theme" id="8"><span>装备制造</span></td>
                        <td class="theme" id="9"><span>交通运输</span></td>
                        <td class="theme" id="10"><span>生物医药</span></td>
                        <td class="theme" id="11"><span>现代农业</span></td>
                        <td class="theme" id="12"><span>节能建筑</span></td>
                        <td class="theme" id="13"><span>科技服务</span></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</body>
</html>

小心窝

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现表格选择多个值传到后台

注意观看控制台的输出情况！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 多重选择 .active{ background: skyblue;
复制链接

扫一扫