数组转化成字符串join(",");

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ruiguang21/article/details/79130814
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script th:src="@{/js/jquery-3.0.0.min.js}"></script>
</head>
<body>
<style>
.grade-list span {
display: block;
width: 20px;
height: 20px;
border: 1px solid #000;
float: left;
}


..biao span {
display: block;
width: 20px;
height: 20px;
border: 1px solid #000;
float: left;
}


.grade-list {
margin-bottom: 20px;
}


.idd{
display:block;
 width:20px;
 height:20px;
 float:left;
border: 1px solid #000;
}


.grade-list label {
display: block;
float: left;
}
.clearfix::after {
content: '';
height: 0;
display: block;
visibility: hidden;
clear: both;
}


.clearfixbiao::after {
content: '';
height: 0;
display: block;
visibility: hidden;
clear: both;
}


.butActive {
background: violet;
}


.butActivebiao {
background: violet;
}
.main{
font-size:120%;
color:red;
}
</style>
<div>
<button>请选择</button>
<p>宝贝</p>
<p>店铺详情</p>


</div>
<div class="grade-list clearfix" id="tel">
<div class="label_btn clearfix"><span id="121416009"  class="cc"></span><label>棒球鞋</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>足球鞋</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>球鞋</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>女生上衣</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>男生上衣</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>毛巾</label></div>
<div class="label_btn clearfix"><span id="125044005"  class="cc"></span><label>鸭翅</label></div>
</div>
<div>
<input type="text" id="begin" placeholder="开始时间" value="">
<input type="text" id="end" placeholder="结束时间" value="">
</div>

<div>
        <select id="selectOption">
            <option>类目属性</option>
            <option>活跃店铺</option>
            <option>宝贝</option>
        </select>
    </div>
    <div class="biao">
    </div>
    
    <button id="btn">点击加载表格</button>
    <table border="1">
        <thead id="tr">
        </thead>
        <tbody id="body">
        </tbody>    
        </table>
        <script type="text/javascript">
        
      //选中
        $("button").click(function(){
        $("p").toggleClass("main");
        })
        
        
        
        
        var selectop;
       
    //切换选择项
    $(".label_btn>span").click(function(){
    ////toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
    $(this).toggleClass("butActive");
    })
   
        //下拉框改变事件
        $("#selectOption").change(function () {
        selectop=$("#selectOption option:selected").val(); 
        $.ajax({
                 url:"http://211.95.60.40:16868/yanshudemo/shop",
                 type:"post",
                 data:{
                  type:selectop
                 },
                 dataType:"json",
                 success:function (data) {
                     console.log(data.columns.length);
                    var  str="";
                    for(var i=0;i<data.columns.length;i++)
                    {
                    //英文转汉文 
                    str+="  <div class='label_biao clearfixbiao'> <span class=\"idd\" id="+data.columns[i]  +" ></span><label>"+data.columns[i]  +"</label>   </div>";
                    }
                       $(".biao").html(str);
                   
                       //切换选择项
                       var label = $(".label_biao");
                       for (var i = 0; i < label.length; i++) {
                           $(".label_biao").eq(i).children("span").click(function() {
                               $(this).toggleClass("butActivebiao");
                           })
                       } 
                 },error:function () {
                  alert("数据开小差了");
                 }
             })
}); 
   
   
   
    $("#btn").click(function(){
    var lab = $(".label_btn");
   
    //转化为数组 
    var checkarr=[];
    for(var i=0;i<lab.length;i++){
    if( lab.eq(i).children("span").attr("class").indexOf("butActive")>-1 ){
    checkarr.push( lab.eq(i).children("span").attr("id") );
    }
    }
   
    //数组转化成字符串
    var str=checkarr.join(",");
    console.log("str>"+str);
    /* //存放指标数组
            var arrid = [];
            for (var j = 0; j < $(".idd").length; j++) {
                if ($(".idd").eq(j).attr("class").indexOf("butActivebiao") > -1) {
                    console.log($(".idd").eq(j).attr("id"));
                }
            } */
   
    var label = $(".idd");
        var arrid=[];
  for(var j=0;j<label.length;j++)
  {
 
  if( label.eq(j).attr("class").indexOf("butActivebiao")>-1 ){
  arrid.push(label.eq(j).attr("id"));

  }
  var strid=arrid.join(",");
  console.log("sss---->"+strid);
    //获取时间
    var startTime=$("#begin").val();
        var endTime=$("#end").val();
        console.log("endTime>"+endTime);
        //selectOption 获取下拉选中项
    var selectop=$("#selectOption option:selected").val();
        /* http://localhost:8080/sbsys/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 */
           $.ajax({
                url:"http://localhost:8080/sbsys/actives",
                type:"post",
                dataType:"json",
                data:{
                fields:strid,
                begintime:startTime,
                endtime:endTime,
                cids:str,
                type:selectop,
                index:1,
                size:10
                },
                success:function (data) {
                console.log(data);
    //  console.log("1111==>"+data.data.rows.length);
     //循环表头
    var str="";
                  str="<tr>" +
                   "<td>"+data.data.columns[0]+"</td>" +
                   "<td>"+data.data.columns[1]+"</td>" +
                   "<td>"+data.data.columns[2]+"</td>" +
                   "<td>"+data.data.columns[3]+"</td>" +
                   "<td>"+data.data.columns[4]+"</td>" +
                   "<td>"+data.data.columns[5]+"</td>" +
                   "</tr>";
                   $("#tr").html(str);
                   //循环表的内容 
                   var row="";
                   for(var j=0;j<data.data.rows.length;j++)
                    {
                    row+="<tr>" +
                       "<td>"+data.data.rows[j][0]+"</td>" +
                       "<td>"+data.data.rows[j][1]+"</td>" +
                       "<td>"+data.data.rows[j][2]+"</td>" +
                       "<td>"+data.data.rows[j][3]+"</td>" +
                       "<td>"+data.data.rows[j][4]+"</td>" +
                       "<td>"+data.data.rows[j][5]+"</td>" +
                       "</tr>";
                    }
                   $("#body").html(row);
                },error:function (data) {
                    alert("no data")
                }
                
            }) 
   
    }) 
 
        
 
       
        
        
        </script>


</body>
</html>
展开阅读全文

没有更多推荐了,返回首页