jquery中For循环的问题

soft114 2017-02-26 10:49:05

想将下面程序中红色字体部分的xDatas值改成for循环（for (var i=1206;i<1278;i++）{ }），试了一直没成功，程序无法运行?
新人请指教，谢谢

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>


<link href="bootstrap-3.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<script type="text/x-tmpl" id="gant_temp">
<tr>
<td style="width:150px"></td>
<% for (var i=0;i<xDatas.length;i++){ %>
<td style="width:35px">
<%=xDatas[i]%>
<td>
<% } %>
</tr>
<tr>
<td style="width:150px">覆盖统计</td>
<% for (var i=0;i<xDatas.length;i++){ %>
<td style="background-color:red" id="<%='tt_'+xDatas[i]%>">

<td>
<% } %>
</tr>

<% if(items){ %>
<% items.forEach(function(item){ %>
<tr>
<td>
<%=item.name%>
</td>
<% for (var i=0;i<xDatas.length;i++){ %>
<td id="<%='td_'+item.name+'_'+xDatas[i]%>">

<td>
<% } %>
</tr>
<% }); %>
<% } %>

</script>
<table id="table1" class="table table-bordered table-striped table-hover" >

</table>


<script src="jquery-1.11.1.min.js"></script>

<script src="bootstrap-3.3.0/dist/js/bootstrap.min.js"></script>
<script src="ejs/ejs.js"></script>

</body>

<script>
function renderTemplate(template, data) {
//data.open = "{%";
//data.close = "%}";
return ejs.render(template, data);
}
//X轴标签
var xDatas = ["1206","1207","1208","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38"];

//数据
var data = [
{name:"2016-01-01",data:[[8,11],[20,30]]},
{name:"2016-01-04",data:[[2,5],[9,16],[22,36]]},
{name:"2016-01-07",data:[[4,8],[9,30],[44,55]]},
{name:"2016-01-21",data:[[10,13],[23,34]]}
];

function init(){
var tmpl = $("#gant_temp").html();
var $table = $("#table1");

var html = renderTemplate(tmpl, {xDatas : xDatas, items:data});
$table.html(html);

$(data).each(function(idx, aobj){
if (aobj.data) {
for (var i = 0; i < aobj.data.length; i++) {
var dataItem = aobj.data[i];
if (dataItem && dataItem.length > 0) {
var valBegin = dataItem[0];
var valEnd = null;
if (dataItem.length > 1){
valEnd = dataItem[1];
}
if (!valEnd){
valEnd = valBegin;
}
for (var x = valBegin; x <= valEnd; x++) {
$("#td_" + aobj.name + "_" + x).css("background-color", "yellow");
$("#tt_"+x).css("background-color", "green");
}
}
}
}
});
}

init();
</script>
</html>

...全文

285 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

___紫菜 2017-02-27

打赏
举报

var xDatas = []; for(var i = 1;i<100;i++) { xDatas.push(i); }

soft114 2017-02-26

打赏
举报

var xDatas = []; for(int i = 1;i<100;i++) { xDatas.push("i"); } 客户端这样写好像不行

soft114 2017-02-26

打赏
举报

我只在本机上实现，不在服务器上使用的，请教如何写呢？

孟子E章 2017-02-26

打赏
举报

你要搞清楚：<%%>里面的代码一般都是服务器端的代码，如jsp,asp等，服务器端的语言和客户端的js不一样的，要使用服务器端的数据，你可以类似这样 var xDatas=[]; <% for(int i = 1;i<100;i++){ %> xDatas.push("<%=%>"); <% } %> 或者ajax请求得到

soft114 2017-02-26