Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > InternetExplorer и DOM


Автор: check 21.8.2007, 12:08
Собственно продолжение http://forum.vingrad.ru/forum/topic-168958.html.
Методы борьбы меняются, но враг остаётся прежним - InternetExplorer smile

Тут я как и прежде фильтрую массив и генерю табличку, на этот раз DOMом:
Код

plans = new Array();
plans[0] = 'И-311',
plans[1] = 'И-334',
plans[2] = 'И-411',
plans[3] = 'И-511',
plans[4] = 'И-611',
plans[5] = 'П-312',


ReleaseID = new Array();
ReleaseID[0] = 1446;
ReleaseID[1] = 1446;
ReleaseID[2] = 1446;
ReleaseID[3] = 1448;
ReleaseID[4] = 1453;
ReleaseID[5] = 1457;



function ArrayFilter(x) {  
    var groups = new Array();   
    for (var i=0; i < ReleaseID.length; i++) {  
        if (ReleaseID[i] == x) {
            groups[i] = plans[i];
        }  
    }    

    Div = document.getElementById('groups');  
    Table=document.createElement('TABLE');
    Table.setAttribute("border", "1");
    Table.setAttribute("width", "100%");
    TBody=document.createElement('TBODY'); 
    
    THead = document.createElement('TR');
    TCell1=document.createElement('TD');
    TCell1.setAttribute("width", "10%");
    TCell2=document.createElement('TD');
    TCell2.setAttribute("width", "10%");
    TCell3=document.createElement('TD');
    THead.appendChild(TCell1);
    THead.appendChild(TCell2);
    THead.appendChild(TCell3);
    TCell1.appendChild(document.createElement('SPAN'));
    TCell2.appendChild(document.createElement('SPAN'));
    TCell3.appendChild(document.createElement('SPAN'));
    TBody.appendChild(THead);  
    
    fchild = Div.firstChild; 
    Div.removeChild(fchild);
       //удаляем из объекта дива таблицу оставшуюся после предыдущего вызова функции
       //иначе они будут накапливаться

    for (var j=0; j < groups.length; j++) {  
        group = new String(groups[j]);  
        if (group != 'undefined') {
            Row=document.createElement('TR');
            Cell1=document.createElement('TD');
            Cell1.setAttribute("width", "10%");
            Cell2=document.createElement('TD');
            Cell2.setAttribute("width", "10%");
            Cell3=document.createElement('TD');
            
            Row.appendChild(Cell1);
            Row.appendChild(Cell2);
            Row.appendChild(Cell3);
            Row.setAttribute("bgcolor", "#FFFFFF");
            TBody.appendChild(Row);
            Cell1.appendChild(document.createElement('SPAN'));
            Cell2.appendChild(document.createElement('SPAN'));
            Cell3.appendChild(document.createTextNode(group));
        }
    }  
    Table.appendChild(TBody);  
    Div.appendChild(Table);  
} 


Интерес представляет собственно момент вставки сгенерированной таблицы в исходный див
Код

<div id="groups">

</div>

это делает строка
Div.appendChild(Table); 

а также вот эти строки
Код

fchild = Div.firstChild; 
Div.removeChild(fchild);



В IE это не работает.  Сама таблица конечно создается, но не отображается.

Что касается Div.removeChild(fchild) то эта строка вызывает ошибку. Ошибку IE7 не показывает.

В Firefox и Opera 9 всё нормально.

Автор: dstorm81 21.8.2007, 12:28
слюшай уважаемый, я смотрю тебя отвадили юзать innerHTML вместе с таблицами?
а ты пытался заново генерить полную таблицу и через innerHTML вставлять в див?

Автор: SamDark 21.8.2007, 12:47
check, 
В IE обязательно нужен TBODY после TABLE. Если с ним намудрить - симптомы будут именно такие. В коде вроде есть, но всё-же...

Автор: check 21.8.2007, 14:27
Цитата(dstorm81 @  21.8.2007,  12:28 Найти цитируемый пост)
слюшай уважаемый, я смотрю тебя отвадили юзать innerHTML вместе с таблицами?
а ты пытался заново генерить полную таблицу и через innerHTML вставлять в див? 
Я сейчас не через innerHTML вставляю: 
Код

Table.appendChild(TBody);  
Div.appendChild(Table);  





Цитата(SamDark @  21.8.2007,  12:47 Найти цитируемый пост)
В IE обязательно нужен TBODY после TABLE. Если с ним намудрить - симптомы будут именно такие. В коде вроде есть, но всё-же...
Так на месте TBODY.  
Если посмотреть alert(Div.innerHTML), выводится(в любом браузере включая IE)
Код

<TABLE border="1" width="100%"><TBODY><TR><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD><SPAN></SPAN></TD></TR><TR bgcolor="#ffffff"><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD>И-311</TD></TR><TR bgcolor="#ffffff"><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD>И-334</TD></TR><TR bgcolor="#ffffff"><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD>И-411</TD></TR><TR bgcolor="#ffffff"><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD>П-512</TD></TR><TR bgcolor="#ffffff"><TD width="10%"><SPAN></SPAN></TD><TD width="10%"><SPAN></SPAN></TD><TD>И-411</TD></TR></TBODY></TABLE>


Я перепробовал уже 4 разных способа вставить эту таблицу.  Каждый из них работает везде, кроме IE(под "везде" я понимая Firefox 1.5.0.7 и Opera 9.10   smile ).

Автор: dstorm81 21.8.2007, 15:13
код полностью

Автор: SamDark 21.8.2007, 15:18
http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces#Creating_a_table_dynamically_.28back_to_Sample1.html.29

Автор: check 21.8.2007, 15:24
Код

<html>
<head>
<style>
* { padding:0; margin:0; }
</style>
<script>
var selectedRow = null;
var lastSelectedRow = null;
plans = new Array();
plans[0] = 'И-311',
plans[1] = 'И-334',
plans[2] = 'И-411',
plans[3] = 'И-511',
plans[4] = 'И-611',
plans[5] = 'П-312',
plans[6] = 'П-412',
plans[7] = 'П-512',
plans[8] = 'П-612',
plans[9] = 'И-017',
plans[10] = 'И-211',
plans[11] = 'И-311',
plans[12] = 'И-244',
plans[13] = 'И-411',
plans[14] = 'И-511',
plans[15] = 'И-611',

ReleaseID = new Array();
ReleaseID[0] = 1446;
ReleaseID[1] = 1446;
ReleaseID[2] = 1446;
ReleaseID[3] = 1448;
ReleaseID[4] = 1453;
ReleaseID[5] = 1457;
ReleaseID[6] = 1447;
ReleaseID[7] = 1446;
ReleaseID[8] = 1454;
ReleaseID[9] = 1458;
ReleaseID[10] = 41;
ReleaseID[11] = 603;
ReleaseID[12] = 603;
ReleaseID[13] = 1446;
ReleaseID[14] = 782;
ReleaseID[15] = 782;


function ArrayFilter(x,id) {  
    if (lastSelectedRow != null) {
        lastSelectedRow.style.backgroundColor = "#FFFFFF";
    }
    row = document.getElementById(id);
    row.style.backgroundColor = "#00FFFF";
    lastSelectedRow = row;
    selectedRow = row;  
    var groups = new Array();   
    for (var i=0; i < ReleaseID.length; i++) {  
        if (ReleaseID[i] == x) {
            groups[i] = plans[i];
        }  
    }    

    Div = document.getElementById('groups');  
    Table=document.createElement('TABLE');
    Table.setAttribute("border", "1");
    Table.setAttribute("width", "100%");
    TBody=document.createElement('TBODY'); 
    
    THead = document.createElement('TR');
    TCell1=document.createElement('TD');
    TCell1.setAttribute("width", "10%");
    TCell2=document.createElement('TD');
    TCell2.setAttribute("width", "10%");
    TCell3=document.createElement('TD');
    THead.appendChild(TCell1);
    THead.appendChild(TCell2);
    THead.appendChild(TCell3);
    TCell1.appendChild(document.createElement('SPAN'));
    TCell2.appendChild(document.createElement('SPAN'));
    TCell3.appendChild(document.createTextNode("Список групп группового учебного плана"));
    TBody.appendChild(THead);  
    
    fchild = Div.firstChild;
    Div.removeChild(fchild);
    for (var j=0; j < groups.length; j++) {  
        group = new String(groups[j]);  
        if (group != 'undefined') {
            Row=document.createElement('TR');
            Cell1=document.createElement('TD');
            Cell1.setAttribute("width", "10%");
            Cell2=document.createElement('TD');
            Cell2.setAttribute("width", "10%");
            Cell3=document.createElement('TD');
            
            Row.appendChild(Cell1);
            Row.appendChild(Cell2);
            Row.appendChild(Cell3);
            Row.setAttribute("bgcolor", "#FFFFFF");
            TBody.appendChild(Row);
            Cell1.appendChild(document.createElement('SPAN'));
            Cell2.appendChild(document.createElement('SPAN'));
            Cell3.appendChild(document.createTextNode(group));
        }
    }  
    Table.appendChild(TBody);  
    Div.appendChild(Table);    
}
</script>
</head>
<body bgcolor="#EBEBEB">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td height="40" bgcolor="#AFEEEE">&nbsp;&nbsp;<span style="color:#8B0000;font-weight:bold">Специальность:</style></td></tr>
</table>
<table width="100%">
<tr><td>
<div style="overflow:scroll;height:150px">
<table border="1" width="100%">
<tr><td width="5%">&nbsp;</td><td width="70%">Наименование учебного плана</td><td>Дата создания</td></tr>
<tr bgcolor="#FFFFFF" id="0" onclick="ArrayFilter(41,0)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="41"></td><td>  2. 220400 - Программное обеспечение ВТ и АС (гр. И-017)</td><td>2002-12-04 00:00:00</td></tr><tr bgcolor="#FFFFFF" id="1" onclick="ArrayFilter(603,1)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="603"></td><td>  4. 220400 - Программное обеспечение ВТ и АС (гр. И-211)</td><td>2005-05-13 00:00:00</td></tr><tr bgcolor="#FFFFFF" id="2" onclick="ArrayFilter(780,2)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="780"></td><td>  5. 220400 - Программное обеспечение ВТ и АС (гр. И-511)</td><td>2005-09-02 15:41:33</td></tr><tr bgcolor="#FFFFFF" id="3" onclick="ArrayFilter(787,3)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="787"></td><td>  8. 220400 - Программное обеспечение ВТ и АС (гр. И-411)</td><td>2005-09-07 17:02:48</td></tr><tr bgcolor="#FFFFFF" id="4" onclick="ArrayFilter(1244,4)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1244"></td><td> 11. 220400 - Программное обеспечение ВТ и АС (2006) </td><td>2006-06-26 16:29:09</td></tr><tr bgcolor="#FFFFFF" id="5" onclick="ArrayFilter(1446,5)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1446"></td><td> 12. 220400 - Программное обеспечение ВТ и АС, гр. И-311, 2007/08 год</td><td>2007-04-10 16:09:17</td></tr><tr bgcolor="#FFFFFF" id="6" onclick="ArrayFilter(1448,6)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1448"></td><td> 13. 220400 - Программное обеспечение ВТ и АС, гр. И-411, 2007/08 год</td><td>2007-04-10 17:03:05</td></tr><tr bgcolor="#FFFFFF" id="7" onclick="ArrayFilter(1453,7)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1453"></td><td> 14. 220400 - Программное обеспечение ВТ и АС, гр. И-511, 2007/08 год</td><td>2007-04-11 13:27:27</td></tr><tr bgcolor="#FFFFFF" id="8" onclick="ArrayFilter(1457,8)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1457"></td><td> 15. 220400 - Программное обеспечение ВТ и АС, гр. И-611, 2007/08 год</td><td>2007-04-12 11:37:29</td></tr><tr bgcolor="#FFFFFF" id="9" onclick="ArrayFilter(1459,9)"><td>&nbsp;<input type="hidden" name="EduPlanReleaseID" value="1459"></td><td> 16. 220400 - Программное обеспечение ВТ и АС, гр. И-711, 2007/08 год</td><td>2007-04-15 11:56:16</td></tr>

</table>
<div>
</td></tr>
<tr><td>
<fieldset>

</fieldset>
</td></tr>
<tr><td>
<div style="overflow:scroll;height:100px">
<table border="1" width="100%">
<div id="groups">

</div>
</table>
</div>
</td></tr>
<table width="100%">
<tr><td width="75%" height="60">&nbsp;</td>
<td width="15%" align="center" valign="bottom"><button onclick="">Создать</button></td>
<td width="10%" align="center" valign="bottom"><button onclick="">Отмена</button></td></tr>
</table>
</body>
</html>

Автор: check 21.8.2007, 15:58
SamDark, сходил  по ссылке .  А что там сделано не так, как у меня? или у меня не так как там?
В body у меня тоже таблица прекрасно вставляется,  она вставляется и в div,  но только не в InternetExplorer.

Автор: SamDark 21.8.2007, 16:25
check, 
Возможно конфликты в глобальном пространстве имён. Попробуйте пока все переменные в функциях объявить локально, а не глобально. Завтра, как будет больше времени, проверю.

Автор: check 22.8.2007, 10:23
Объявил переменные внутри функции как локальные и вообще ко всем сомнительным именам переменных типа Table или Row добавил префикс m(mTable, mRow),  кроме того подчистил кое-какой мусор в html:
вот это 
Код

<div style="overflow:scroll;height:100px">
<table border="1" width="100%">
<div id="groups">
</div>
</table>
</div>

заменил на это
Код

<div id="groups" style="overflow:scroll;height:100px">
</div>

Ничего не изменилось.

Автор: check 23.8.2007, 08:42
Бред конечно,  но похоже придётся специально для IE сделать это через аякс.
То есть если не IE работает нормальный клиентский вариант,   а если IE то аякс.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)