他們是在 javascript 中添加循環嗎
[英]is their was to add loop inside in javascript
問題描述
我嘗試使用日歷代碼筆中的模板，所以我的目標是添加一些具有事件名稱以及開始和結束日期的事件。所以我使用 java 並使用 JSP 來編碼這是代碼 Z78E6221F6393D135686為了定義索引，我一次又一次地嘗試了許多添加循環但得到錯誤的方法
<%@page import="java.util.Arrays"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
<body>
<br/>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
</div>
<%
String[] eventArray=new String[3];
String[] startdateArray=new String[3];
String[] enddateArray=new String[3];
int i=0;
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/calendar","root","");
Statement st=(Statement) con.createStatement();
ResultSet rs=(ResultSet) st.executeQuery("select * from events");
while(rs.next()){
eventArray[i]=rs.getString("event");
startdateArray[i]=rs.getString("startdate");
enddateArray[i]=rs.getString("enddate");
/*System.out.println("Event is:" +eve);
System.out.println("Starting Date is:" +startdate);
System.out.println("Ending date is:" +enddate);*/
i=i+1;
}
} catch (Exception e) {
e.printStackTrace();
}
%>
<script>
var event=[ ];
var startd=[ ];
var endd=[ ];
<%for(int x=0;x<eventArray.length;x++) {%>
event[<%= x %>]='<%=eventArray[x]%>';
startd[<%= x %>]='<%=startdateArray[x]%>';
endd[<%= x %>]='<%=enddateArray[x]%>';
<%}%>
var j=0;
even:[
{ title: event[j] ,start: startd[j],end: endd[j],}
]
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[5] ,start: startd[5],end: endd[5],},
//{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[j+1] ,start: startd[j+1],end: endd[j+1],},
//{ title: event[j+2] ,start: startd[j+2],end: endd[j+2],},
]
});
});
</script>
所以我剛剛在數據庫中添加了 3 個事件，因此刪除了評論我得到了與事件有關的 3 個日期，但是如果它們是 100 個事件，我無法正確添加 100 個，所以我需要一些方法來解決這個問題，請有人幫助我任何想法請發表評論，以便我們可以嘗試提前謝謝謝謝。
1 個解決方案
解決方案1
0 已采納 2020-06-29 17:01:26
您可以使用objects創建json-array並將其傳遞給您的events ，而不是在js中創建 3 個不同的fullcalender 。您需要在代碼中進行一些更改：
您的javascript代碼：
<script>
var datas=new Array(); //declare this
<%for(int x=0;x<eventArray.length;x++) {%>
//adding data
items={};
items["title"]='<%=eventArray[x]%>';
items["start"]='<%=startdateArray[x]%>';
items["end"]='<%=enddateArray[x]%>';
datas.push(items);//push data into array
<%}%>
console.log(datas)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: datas //pass same json array created
});
});
</script>
演示代碼：
var datas=new Array(); //adding dummy data items={}; items["title"]="abc"; items["start"]="2020-05-20"; items["end"]="2020-05-26"; datas.push(items); //adding dummy data items={}; items["title"]="abwc"; items["start"]="2020-06-15"; items["end"]="2020-06-28"; datas.push(items); console.log(datas) $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }, defaultDate: '2020-06-28', navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events events:datas//passs the same }); });
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'> <link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script> <div class="ui container"> <div class="ui grid"> <div class="ui sixteen column"> <div id="calendar"></div> </div> </div> </div>
如何在JavaScript函數內部添加for循環？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.