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

来源：互联网发布：阿里云矢量图标库编辑：程序博客网时间：2024/06/04 17:51
注意观看控制台的输出情况！
<!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>
1 0