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

最新推荐文章于 2024-08-01 13:02:18 发布

ruiguang21

最新推荐文章于 2024-08-01 13:02:18 发布

阅读量1.5k

点赞数

分类专栏： jquery javascript js

本文链接：https://blog.csdn.net/ruiguang21/article/details/79130814

版权

js 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

23 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

<!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>