I'm attempting to make a tree view using JavaScript. I have a list of Divs created dynamically. A parent node that is showing and a child node that will not be showing. When you hit the button on the parent node it will call show('slow'). This works on IE8 and IE9, but when I test it with IE7, the child node will show with out it's CSS class. How can I make this work with IE7?
code in the main page
function CreateEventCategoryDiv(EventCategoryName) {
var NewEventCategoryNode = document.createElement('div');
NewEventCategoryNo开发者_StackOverflow社区de.id = EventCategoryName + "Node";
if (TreeNodeCounter == 0 || (TreeNodeCounter % 2) == 0) {
NewEventCategoryNode.className = "EventCategoryNodesEven";
}
else {
NewEventCategoryNode.className = "EventCategoryNodesOdd";
}
NewEventCategoryNode.innerHTML = "<input type='button' value='+' id='ExpandButton' class='ExpandNodeButtons' onclick='ExpandNode(\"" + EventCategoryName + "\");' /> " + EventCategoryName;
var EventTree = document.getElementById("EventTree");
EventTree.appendChild(NewEventCategoryNode);
TreeNodeCounter++;
}
function ExpandNode(PassedNode) {
var ParentNode = CalendarObject.SearchCategoryNode(PassedNode);
if (ParentNode.IsChildrenShowing == false) {
ParentNode.ExpandNodes(CalendarObject.Months);
}
else if (ParentNode.IsChildrenShowing == true) {
ParentNode.CollapseNode(CalendarObject.Months);
}
}
This Part is called in the EventCategory Class to add the child nodes(sorry I forgot this one at first)
this.AddEventType = function (EventTypeNode) {
var NewElement = document.createElement('Div');
NewElement.id = EventTypeNode.DivAssociateId;
NewElement.innerText = EventTypeNode.Name;
if (this.NodesCount == 0 || (this.NodesCount % 2) == 0) {
NewElement.setAttribute("class", "EventTypeNodesEven");
}
else {
NewElement.setAttribute("class", "EventTypeNodesOdd");
}
NodesCount = this.EventTypeNodesArray.push(EventTypeNode);
$(NewElement).hide();
var ParentElement = document.getElementById("EventTree");
ParentElement.appendChild(NewElement);
this.NodesCount++;
};
This Part is in the CalendarGrid class
this.ExpandNodes = function (MonthArray) {
for (var x in this.EventTypeNodesArray) {
var SelectedNode = document.getElementById(this.EventTypeNodesArray[x].DivAssociateId);
if (this.IsChildrenShowing == false) {
$(SelectedNode).show('slow');
for (var y = 0; y < MonthArray.length; y++) {
var SelectedRow = document.getElementById(this.EventTypeNodesArray[x].Name + MonthArray[y].MonthName + "Row");
$(SelectedRow).show('slow');
}
}
}
this.IsChildrenShowing = true;
};
CSS Code:
.EventTypeNodesOdd
{
font-family:Arial;
font-weight:bold;
text-align:center;
height:27px;
background-color:#dbe2e6;
display:block;
}
.EventTypeNodesEven
{
font-family:Arial;
font-weight:bold;
text-align:center;
height:27px;
background-color:#f9fafb;
}
Try setting the class to whatever it should be after showing it.
精彩评论