1
私は 'カレンダーイベント'アプリをやっています。曜日、時間、短い説明を選択した後、[イベントの追加]ボタンをクリックして表に行を追加できますが、セルを追加する方法はわかりません。私はクラスvar eventContent = document.querySelectorAll('.event');「を.event」をつかむことで、セルを追加し、appendChild()メソッドを使用しようとしていた 、イベントカレンダー - 複数のテーブル要素を追加する方法
for(var j = 0; j < eventContent.length; j +=1){
eventContent[j].appendChild(tdElement1);
eventContent[j].appendChild(tdElement2);
}
が、曜日を変更した後、あるべきなセルが挿入されていません。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily Programmer Challenge #0004 | Events Calendar</title>
<link rel="stylesheet" href="css/0004_eventsCalendar.css">
</head>
<body>
<div id="container">
<div class="toolbarMenu">
<div class="toolLeft">
<div class="leftButtons">
<button type="button"><span><</span></button>
<button type="button"><span>></span></button>
</div>
<button type="button">today</button>
</div>
<div class="toolCenter">
<h2>Test</h2>
</div>
</div>
<hr>
<div id="content">
<div id="leftSide">
<table>
<tbody>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Monday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Tuesday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Wednesday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Thursday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Friday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Saturday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Sunday</span><span class="dayDate"></span></td>
</tr>
<!--
<tr class="event">
<td class="time"></td>
<td class="desc"></td>
</tr>
-->
</tbody>
</table>
<p><i><strong>Note:</strong> After adding event into table, you can EDIT it!</i></p>
</div>
<div id="rigthSide">
<h3>Calendar panel</h3>
<form id="calendarCMS" name = "calendarCMS" action="#">
<fieldset>
<select name="dayOfWeek" id="dayOfWeek">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div id="fromToTime">
<span>from:</span>
<select name="fromTime" id="fromTime">
<option value="07.00am">07:00am</option>
<option value="07.15am">07:15am</option>
<option value="07.30am">07:30am</option>
<option value="07.45am">07:45am</option>
<option value="08.00am">08:00am</option>
<option value="08.15am">08:15am</option>
<option value="08.30am">08:30am</option>
<option value="08.45am">08:45am</option>
<option value="09.00am">09:00am</option>
<option value="09.15am">09:15am</option>
<option value="09.30am">09:30am</option>
<option value="09.45am">09:45am</option>
<option value="10.00am">10:00am</option>
<option value="10.15am">10:15am</option>
<option value="10.30am">10:30am</option>
<option value="10.45am">10:45am</option>
<option value="11.00am">11:00am</option>
<option value="11.15am">11:15am</option>
<option value="11.30am">11:30am</option>
<option value="11.45am">11:45am</option>
<option value="12.00am">12:00am</option>
<option value="12.15am">12:15am</option>
<option value="12.30am">12:30am</option>
<option value="12.45am">12:45am</option>
<option value="13.00pm">13:00pm</option>
<option value="13.15pm">13:15pm</option>
<option value="13.30pm">13:30pm</option>
<option value="13.45pm">13:45pm</option>
<option value="14.00pm">14:00pm</option>
<option value="14.15pm">14:15pm</option>
<option value="14.30pm">14:30pm</option>
<option value="14.45pm">14:45pm</option>
<option value="15.00pm">15:00pm</option>
<option value="15.15pm">15:15pm</option>
<option value="15.30pm">15:30pm</option>
<option value="15.45pm">15:45pm</option>
<option value="16.00pm">16:00pm</option>
<option value="16.15pm">16:15pm</option>
<option value="16.30pm">16:30pm</option>
<option value="16.45pm">16:45pm</option>
<option value="17.00pm">17:00pm</option>
<option value="17.15pm">17:15pm</option>
<option value="17.30pm">17:30pm</option>
<option value="17.45pm">17:45pm</option>
<option value="18.00pm">18:00pm</option>
<option value="18.15pm">18:15pm</option>
<option value="18.30pm">18:30pm</option>
<option value="18.45pm">18:45pm</option>
<option value="19.00pm">19:00pm</option>
<option value="19.15pm">19:15pm</option>
<option value="19.30pm">19:30pm</option>
<option value="19.45pm">19:45pm</option>
<option value="20.00pm">20:00pm</option>
<option value="20.15pm">20:15pm</option>
<option value="20.30pm">20:30pm</option>
<option value="20.45pm">20:45pm</option>
<option value="21.00pm">21:00pm</option>
<option value="21.15pm">21:15pm</option>
<option value="21.30pm">21:30pm</option>
<option value="21.45pm">21:45pm</option>
<option value="22.00pm">22:00pm</option>
<option value="22.15pm">22:15pm</option>
<option value="22.30pm">22:30pm</option>
<option value="22.45pm">22:45pm</option>
<option value="23.00pm">23:00pm</option>
<option value="23.15pm">23:15pm</option>
<option value="23.30pm">23:30pm</option>
<option value="23.45pm">23:45pm</option>
<option value="00.00am">00:00am</option>
<option value="00.15am">00:15am</option>
<option value="00.30am">00:30am</option>
<option value="00.45am">00:45am</option>
<option value="01.00am">01:00am</option>
<option value="01.15am">01:15am</option>
<option value="01.30am">01:30am</option>
<option value="01.45am">01:45am</option>
<option value="02.00am">02:00am</option>
<option value="02.15am">02:15am</option>
<option value="02.30am">02:30am</option>
<option value="02.45am">02:45am</option>
<option value="03.00am">03:00am</option>
<option value="03.15am">03:15am</option>
<option value="03.30am">03:30am</option>
<option value="03.45am">03:45am</option>
<option value="04.00am">04:00am</option>
<option value="04.15am">04:15am</option>
<option value="04.30am">04:30am</option>
<option value="04.45am">04:45am</option>
<option value="05.00am">05:00am</option>
<option value="05.15am">05:15am</option>
<option value="05.30am">05:30am</option>
<option value="05.45am">05:45am</option>
<option value="06.00am">06:00am</option>
<option value="06.15am">06:15am</option>
<option value="06.30am">06:30am</option>
<option value="06.45am">06:45am</option>
</select>
<span>to:</span>
<select name="toTime" id="toTime">
<option value="07.00am">07:00am</option>
<option value="07.15am">07:15am</option>
<option value="07.30am">07:30am</option>
<option value="07.45am">07:45am</option>
<option value="08.00am">08:00am</option>
<option value="08.15am">08:15am</option>
<option value="08.30am">08:30am</option>
<option value="08.45am">08:45am</option>
<option value="09.00am">09:00am</option>
<option value="09.15am">09:15am</option>
<option value="09.30am">09:30am</option>
<option value="09.45am">09:45am</option>
<option value="10.00am">10:00am</option>
<option value="10.15am">10:15am</option>
<option value="10.30am">10:30am</option>
<option value="10.45am">10:45am</option>
<option value="11.00am">11:00am</option>
<option value="11.15am">11:15am</option>
<option value="11.30am">11:30am</option>
<option value="11.45am">11:45am</option>
<option value="12.00am">12:00am</option>
<option value="12.15am">12:15am</option>
<option value="12.30am">12:30am</option>
<option value="12.45am">12:45am</option>
<option value="13.00pm">13:00pm</option>
<option value="13.15pm">13:15pm</option>
<option value="13.30pm">13:30pm</option>
<option value="13.45pm">13:45pm</option>
<option value="14.00pm">14:00pm</option>
<option value="14.15pm">14:15pm</option>
<option value="14.30pm">14:30pm</option>
<option value="14.45pm">14:45pm</option>
<option value="15.00pm">15:00pm</option>
<option value="15.15pm">15:15pm</option>
<option value="15.30pm">15:30pm</option>
<option value="15.45pm">15:45pm</option>
<option value="16.00pm">16:00pm</option>
<option value="16.15pm">16:15pm</option>
<option value="16.30pm">16:30pm</option>
<option value="16.45pm">16:45pm</option>
<option value="17.00pm">17:00pm</option>
<option value="17.15pm">17:15pm</option>
<option value="17.30pm">17:30pm</option>
<option value="17.45pm">17:45pm</option>
<option value="18.00pm">18:00pm</option>
<option value="18.15pm">18:15pm</option>
<option value="18.30pm">18:30pm</option>
<option value="18.45pm">18:45pm</option>
<option value="19.00pm">19:00pm</option>
<option value="19.15pm">19:15pm</option>
<option value="19.30pm">19:30pm</option>
<option value="19.45pm">19:45pm</option>
<option value="20.00pm">20:00pm</option>
<option value="20.15pm">20:15pm</option>
<option value="20.30pm">20:30pm</option>
<option value="20.45pm">20:45pm</option>
<option value="21.00pm">21:00pm</option>
<option value="21.15pm">21:15pm</option>
<option value="21.30pm">21:30pm</option>
<option value="21.45pm">21:45pm</option>
<option value="22.00pm">22:00pm</option>
<option value="22.15pm">22:15pm</option>
<option value="22.30pm">22:30pm</option>
<option value="22.45pm">22:45pm</option>
<option value="23.00pm">23:00pm</option>
<option value="23.15pm">23:15pm</option>
<option value="23.30pm">23:30pm</option>
<option value="23.45pm">23:45pm</option>
<option value="00.00am">00:00am</option>
<option value="00.15am">00:15am</option>
<option value="00.30am">00:30am</option>
<option value="00.45am">00:45am</option>
<option value="01.00am">01:00am</option>
<option value="01.15am">01:15am</option>
<option value="01.30am">01:30am</option>
<option value="01.45am">01:45am</option>
<option value="02.00am">02:00am</option>
<option value="02.15am">02:15am</option>
<option value="02.30am">02:30am</option>
<option value="02.45am">02:45am</option>
<option value="03.00am">03:00am</option>
<option value="03.15am">03:15am</option>
<option value="03.30am">03:30am</option>
<option value="03.45am">03:45am</option>
<option value="04.00am">04:00am</option>
<option value="04.15am">04:15am</option>
<option value="04.30am">04:30am</option>
<option value="04.45am">04:45am</option>
<option value="05.00am">05:00am</option>
<option value="05.15am">05:15am</option>
<option value="05.30am">05:30am</option>
<option value="05.45am">05:45am</option>
<option value="06.00am">06:00am</option>
<option value="06.15am">06:15am</option>
<option value="06.30am">06:30am</option>
<option value="06.45am">06:45am</option>
</select>
</div>
<textarea name="eventDesc" id="eventDesc" cols="45" rows="10" placeholder="Please write the description event details"></textarea>
<input type="submit" value="Add Event">
</fieldset>
<div id="error"></div>
</form>
</div>
</div>
</div>
<script src="js/0004_eventsCalendar.js"></script>
</body>
</html>
JavaScriptコード：
//self-executing function to protect our local variables
(function(){
// current date
var curentDate = new Date();
// set variable to first day of week (Monday)
var firstDay = (curentDate.getDate() - (curentDate.getDay()-1));
// array of months
var allMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
// loop through to get last day (Friday) of the curent week
for(var i = 0; i < 7; i +=1){
var lastDay = firstDay + i;
}
// add the date to DOM element (h2 tag)
document.querySelector('h2').innerHTML =
allMonths[curentDate.getMonth()] + ' ' + firstDay + ' - ' + lastDay + ', ' + curentDate.getFullYear();
// get all DOM nodes with the class name ('.dayDate')
var dayDate = document.querySelectorAll('.dayDate');
// loop through those nodes and add to DOM month, current date and year
for(var i = 0; i < dayDate.length; i+=1){
dayDate[i].innerHTML = allMonths[curentDate.getMonth()] + ' ' + (firstDay + i) + ', ' + curentDate.getFullYear();
}
// assign form HTML element of Calendar panel to variables. Where '.fromTime' and '.toTome' , are names of <select> tag
var fromTime = document.calendarCMS.fromTime;
var toTime = document.calendarCMS.toTime;
// function for manipulating times (from: and to:), in Calendar panel
function changeFromTime(e){
// triger when time in first pop-down menu '.fromTime' is higher than in second pop-down menu '.toTime'
// where selectedIndex is a number (position) of currently selected element in pop-down menu
if(fromTime.selectedIndex >= toTime.selectedIndex){
// loop throogh first pop-down menu 'fromTime', where fromTime.selectedIndex is index curently selected element
for(var i = 0; i <= fromTime.selectedIndex; i +=1){
// hide all times in second pop-down menu 'toTime' which are below times in '.fromTime' pop-down menu
toTime[i].style.display = 'none';
}
// change position '.toTime' pop-down menu index to be equal to first pop-down menu '.froTime'
return toTime.selectedIndex = i;
}
// triger when time in first pop-down menu '.fromTime' is lower than in second pop-down menu '.toTime'
if(fromTime.selectedIndex <= toTime.selectedIndex){
// reverse (remove) styling when user change to earlier time, where we removing styling only to elements which are
// below curently selected index (i = fromTime.selectedIndex) in '.fromTime' pop-down menu
for(var i = fromTime.selectedIndex; i < toTime.selectedIndex; i +=1){
toTime[i].removeAttribute('style');
}
// change position '.toTime' pop-down menu index to be equal to first pop-down menu '.froTime'
return toTime.selectedIndex = fromTime.selectedIndex;
}
}
// function use to add/remove calendar events
function addEvent(e){
//event will triger only when user press submit 'Add Event' button
if(e.target.type === 'submit'){
// prevent submit button from default behavior
e.preventDefault();
// assign a couple of variables
var textArea = document.querySelector('textarea');
var eventHead = document.querySelectorAll('.eventHead');
var trElement = document.createElement('tr');
trElement.className = 'event';
var eventDesc = document.querySelectorAll('.desc');
var eventTime = document.querySelectorAll('.time');
var errMsg = document.querySelector('#error');
errMsg.style.color = "red";
// loop through description field in HTML table
for(var i = 0; i < eventHead.length; i+=1){
// trigger when option in index in 'dayOfWeek' pop-down menu will match index of description field
if(document.calendarCMS.dayOfWeek.selectedIndex === i){
// if textarea in HTML will be empty, then the error msg will pop out, blocking user from adding event
if(textArea.value === ''){
// error msg show when user doesn't fill all necessary details
errMsg.innerHTML = 'Please fill all fields';
return;
} else{ // if all require filed will be filled
/*
// after description of event will be added to table, then will be editable
eventDesc[i].contentEditable = true;
// after times of event will be added to table, then will be editable
eventTime[i].contentEditable = true;
*/
eventHead[i].parentNode.insertBefore(trElement.cloneNode(true), eventHead[i].nextElementSibling);
var eventContent = document.querySelectorAll('.event');
var tdElement1 = document.createElement('td');
var tdElement2 = document.createElement('td');
tdElement1.className = 'time';
tdElement2.className = 'desc';
for(var j = 0; j < eventContent.length; j +=1){
eventContent[j].appendChild(tdElement1);
eventContent[j].appendChild(tdElement2);
}
// reset all field in Calendar panel
fromTime.selectedIndex = 0;
toTime.selectedIndex = 0;
textArea.value = '';
errMsg.innerHTML = '';
}
}
}
}
}
// function for higlight current day of the week
function todayDay(e){
// triger only when user click 'today' button
if(e.target.textContent === 'today'){
var focusEvent = document.querySelectorAll('.event');
// loop through to find the current day of the week and highliht it
for(var i = 0; i < focusEvent.length; i +=1){
if(curentDate.getDay() === i){
focusEvent[i-1].style.background = 'yellow';
}
}
}
}
// events listeners
document.querySelector('#calendarCMS').addEventListener('click', addEvent, false);
document.querySelector('#fromTime').addEventListener('change', changeFromTime, false);
document.querySelector('.toolLeft').addEventListener('click', todayDay, false);
})();
はHTMLの一部をコメントします？そして、あなたはeventContentをループしています - それで、イベントクラスを持つ複数のコメント行が存在することが示唆されますか？ – Piotr
textArea.valueで何をしたいのかわかりません - addEventでは空ではないかどうかをチェックしていますが、後でこの値を使用することはありません。 – Piotr
私はバージョン1で 'textArea.value'を使用しました。ここでは' innerHTML'メソッドを使ってセルに値を出力しています。うまくいきましたが、カレンダーの場合は毎日1行しか表示できませんでした： '} else { eventDesc [i] .innerHTML = textArea.value; eventTime [i] .innerHTML = fromTime.value + ' - ' + toTime.value; ... ' しかし、私は単なる行以上を追加することができると思った... – Martin