我正在做“日历活动”应用。选择星期几，时间和简短描述后，我可以点击“添加事件”按钮并向表中添加一行（不可见），但我不知道，如何添加一个单元格。
我试图通过抓取'.event'类var eventContent = document.querySelectorAll('.event');并使用appendChild()方法来添加单元格，
for(var j = 0; j < eventContent.length; j +=1){
eventContent[j].appendChild(tdElement1);
eventContent[j].appendChild(tdElement2);
}
但是在更改星期几后，单元格不会插入。 有HTML代码：
<!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);
})();
答案 0 :(得分：0)
我并不完全理解您使用注释的tr类“事件”的尝试。但是你想要实现的目标（至少从描述中推断）可以通过将addEvent声明为：
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;
*/
var newTr = trElement.cloneNode(true);
eventHead[i].parentNode.insertBefore(newTr, eventHead[i].nextElementSibling);
var eventContent = document.querySelectorAll('.event');
var tdElement1 = document.createElement('td');
var tdElement2 = document.createElement('td');
tdElement1.innerText=fromTime.value + " - " + toTime.value;
tdElement2.innerText=textArea.value;
tdElement1.className = 'time';
tdElement2.className = 'desc';
for(var j = 0; j < eventContent.length; j +=1){
newTr.appendChild(tdElement1);
newTr.appendChild(tdElement2);
}
// reset all field in Calendar panel
fromTime.selectedIndex = 0;
toTime.selectedIndex = 0;
textArea.value = '';
errMsg.innerHTML = '';
}
}
}
}
}
您可以在此处试用：https://jsfiddle.net/dn9v5qf9/