2009-01-05 5 views
0

아래 코드의 문제점은 Internet Explorer가 아닌 Mozilla에서는 모두 선택 옵션이 잘 작동한다는 것입니다. "모두 선택"문제가 발생했습니다.

<!-- 
Document : DG 
Created on : Sep 11, 2008, 12:48:37 PM 
Author  : padmaja 
--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <script type="text/javascript"> 
<!-- 
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
var days = new Array("S", "M", "T", "W", "T", "F", "S"); 

today = new getToday(); 
var element_id; 

function getDays(month, year) 
{ 
// Test for leap year when February is selected. 
if (1 == month) 
    return ((0 == year % 4) && (0 != (year % 100))) || 
     (0 == year % 400) ? 29 : 28; 
else 
    return daysInMonth[month]; 
} 

function getToday() 
{ 
// Generate today's date. 
this.now = new Date(); 
this.year = this.now.getFullYear() ; // Returned year XXXX 
this.month = this.now.getMonth(); 
this.day = this.now.getDate(); 
} 


function newCalendar() 
{ 
var parseYear = parseInt(document.all.year [document.all.year.selectedIndex].text); 

var newCal = new Date(parseYear , document.all.month.selectedIndex, 1); 
var day = -1; 
var startDay = newCal.getDay(); 
var daily = 0; 

today = new getToday(); // 1st call 
if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth())) 
    day = today.day; 
// Cache the calendar table's tBody section, dayList. 
var tableCal = document.all.calendar.tBodies.dayList; 

var intDaysInMonth = 
    getDays(newCal.getMonth(), newCal.getFullYear()); 

for (var intWeek = 0; intWeek < tableCal.rows.length; intWeek++) 
     for (var intDay = 0; 
     intDay < tableCal.rows[intWeek].cells.length; 
     intDay++) 
{ 
     var cell = tableCal.rows[intWeek].cells[intDay]; 

     // Start counting days. 
     if ((intDay == startDay) && (0 == daily)) 
     daily = 1; 

     // Highlight the current day. 
     cell.style.color = (day == daily) ? "red" : ""; 
     if(day == daily) 
     { 
      document.all.todayday.innerText= "Today: " + day + "/" + 
       (newCal.getMonth()+1) + "/" + newCal.getFullYear() ; 
     } 
     // Output the day number into the cell. 
     if ((daily > 0) && (daily <= intDaysInMonth)) 
     cell.innerText = daily++; 
     else 
     cell.innerText = ""; 
    } 

} 

function getTodayDay() 
{ 
      document.all[element_id].value = today.year + "/" + (today.month+1) + 
       "/" + today.day; 
      //document.all.calendar.style.visibility="hidden"; 
      document.all.calendar.style.display="none"; 
      document.all.year.selectedIndex =100; 
      document.all.month.selectedIndex = today.month; 
} 

    function getDate() 
    { 
     // This code executes when the user clicks on a day 
     // in the calendar. 
     if ("TD" == event.srcElement.tagName) 
      // Test whether day is valid. 
      if ("" != event.srcElement.innerText) 
      { 
      var mn = document.all.month.selectedIndex+1; 
      var Year = document.all.year [document.all.year.selectedIndex].text; 
      document.all[element_id].value=Year +"-"+mn+"-"+event.srcElement.innerText; 
      document.all.calendar.style.display="none"; 
     } 
    } 

function GetBodyOffsetX(el_name, shift) 
{ 
var x; 
var y; 
x = 0; 
y = 0; 

var elem = document.all[el_name]; 
do 
{ 
    x += elem.offsetLeft; 
    y += elem.offsetTop; 
    if (elem.tagName == "BODY") 
     break; 
    elem = elem.offsetParent; 
} while (1 > 0); 

shift[0] = x; 
shift[1] = y; 
return x; 
} 

function SetCalendarOnElement(el_name) 
{ 
if (el_name=="") 
el_name = element_id; 
var shift = new Array(2); 
GetBodyOffsetX(el_name, shift); 
document.all.calendar.style.pixelLeft = shift[0]; // - document.all.calendar.offsetLeft; 
document.all.calendar.style.pixelTop = shift[1] + 25 ; 
} 



function ShowCalendar(elem_name) 
{ 
    if (elem_name=="") 
    elem_name = element_id; 

    element_id = elem_name; // element_id is global variable 
    newCalendar(); 
    SetCalendarOnElement(element_id); 
    //document.all.calendar.style.visibility = "visible"; 
    document.all.calendar.style.display="inline"; 
} 

function HideCalendar() 
{ 
//document.all.calendar.style.visibility="hidden"; 
document.all.calendar.style.display="none"; 
} 

function toggleCalendar(elem_name) 
{ 
//if (document.all.calendar.style.visibility == "hidden") 
if(document.all.calendar.style.display=="none") 
    ShowCalendar(elem_name); 
else 
    HideCalendar(); 
} 
--> 
</script> 

<style> 
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold} 
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center} 
.dates {COLOR: black; FONT-F 

AMILY: sans-serif; FONT-SIZE: 10pt} 
</style> 
</head> 

    <body bgcolor="#FFF8DC"> 
    <h5>Diesel Generators</h5><br><br> 
     <br> 
      <br> 
       <script language="JavaScript"> 
function toggle(source) { 
    checkboxes = document.getElementsByName('DG1'); 
    for each(var checkbox in checkboxes) 
    checkbox.checked = source.checked; 
    checkboxes = document.getElementsByName('DG2'); 
    for each(var checkbox in checkboxes) 
    checkbox.checked = source.checked; 
    checkboxes = document.getElementsByName('DG3'); 
    for each(var checkbox in checkboxes) 
    checkbox.checked = source.checked; 
    checkboxes = document.getElementsByName('DG4'); 
    for each(var checkbox in checkboxes) 
    checkbox.checked = source.checked; 
    checkboxes = document.getElementsByName('DG5'); 
    for each(var checkbox in checkboxes) 
    checkbox.checked = source.checked; 
} 
</script> 

<input type="checkbox" onClick="toggle(this)" /> Select All<br/> 

<form method=POST action="DGUsageServlet"> 

<INPUT TYPE="CHECKBOX" name="DG1">DG1 
<INPUT TYPE="CHECKBOX" name="DG2">DG2 
<INPUT TYPE="CHECKBOX" name="DG3">DG3 
<INPUT TYPE="CHECKBOX" name="DG4">DG4 
<INPUT TYPE="CHECKBOX" name="DG5">DG5 

<br> 
<br> 
<INPUT TYPE=TEXT NAME="StartDate"> 
    <a href="JavaScript:;" onClick="toggleCalendar('StartDate')">StartDate</a> 
<INPUT TYPE=TEXT NAME="EndDate"> 
    <a href="JavaScript:;" onClick="toggleCalendar('EndDate')">EndDate</a> 
<input name=plotgraph value=plotgraph align="CENTER" type=submit> 
</form> 
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4"> 
    <TBODY> 
    <TR> 
    <TD colSpan=7 vAlign=center> 
    <!-- Month combo box --> 
    <SELECT id=month onchange=newCalendar()> 
     <script type="text/javascript"> 
     // Output months into the document. 
     // Select current month. 
     for (var intLoop = 0; intLoop < months.length; intLoop++) 
      document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]); 
     </SCRIPT> 
    </SELECT> 
    <!-- Year combo box --> 
    <SELECT id=year onchange=newCalendar()> 
     <script type="text/javascript"> 
     // Output years into the document. 
     // Select current year. 
     for (var intLoop = 1900; intLoop < 2028; intLoop++) 
      document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop); 
     </SCRIPT> 
    </SELECT> 

    </TD> 
    </TR> 



    <TR class=days> 
    <!-- Generate column for each day. --> 
    <script type="text/javascript"> 
    // Output days. 
    for (var intLoop = 0; intLoop < days.length; intLoop++) 
     document.write("<TD>" + days[intLoop] + "</TD>"); 
    </SCRIPT> 
    </TR> 


    <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center> 
    <!-- Generate grid for individual days. --> 
    <script type="text/javascript"> 
    for (var intWeeks = 0; intWeeks < 6; intWeeks++) 
    { 
     document.write("<TR>"); 
     for (var intDays = 0; intDays < days.length; intDays++) 
      document.write("<TD>" +intDays+ "</TD>"); 

     document.write("</TR>"); 
    } 
    </SCRIPT> 

    <!-- Generate today day. --></TBODY> 
    <TBODY> 
    <TR> 
    <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD> 
    <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD> 
    </TR> 
    </TBODY> 

</TABLE> 



</body> 
</html> 

사전에 나에게

감사를 안내하시기 바랍니다.

답변

5

코드는 그것이, 대신 IE 4는 document.all DOM을 도입 document.getElementById를

를 사용한다 사용하지 마십시오 사방 document.all 사용하고 있습니다. 그 후 곧 표준 DOM 메소드 getElementById가 도입되었으므로 모든 최신 브라우저에서 사용할 수 있습니다. 예를 들어

:

document.all.calendar.style.display="none"; 

지금해야합니다

document.getElementById('calendar').style.display="none"; 
+1

내 마음, 넷스케이프 대 IE, document.all 대의 document.layers 전쟁에 온 ... 너무 많은 시간이 경과 .... – CMS

0

for each(var in array/object) 구조는 자바 스크립트 비교적 최근에 추가되었습니다. 사용하지 마십시오. IE는 아마 그것에 질식입니다.

대신 이전의 (보편적으로 지원되는) for (var in array/object) 구조체를 사용하십시오.

배열에 for (var in x) 구조를 사용하지 말고 rather use them only on objects을 사용하지 마십시오.

여기 내 재 작성이다 : 그것은 코드가 옛 추억을 만들어

function toggle(source) { 
    var checkboxes = document.getElementsByName('DG1'); 
    for (var i=0; i<checkboxes.length; i++){ 
     checkbox.checked = source.checked; 
    } 
    // etc... 
}