InternetExplorer и DOM

 
0
 
JavaScript
ava
check | 21.08.2007, 13:08
Собственно продолжение этой темы.
Методы борьбы меняются, но враг остаётся прежним - InternetExplorer :)

Тут я как и прежде фильтрую массив и генерю табличку, на этот раз 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 всё нормально.
Comments (10)
ava
dstorm81 | 21.08.2007, 12:28 #
слюшай уважаемый, я смотрю тебя отвадили юзать innerHTML вместе с таблицами?
а ты пытался заново генерить полную таблицу и через innerHTML вставлять в див?
ava
SamDark | 21.08.2007, 12:47 #
check,
В IE обязательно нужен TBODY после TABLE. Если с ним намудрить - симптомы будут именно такие. В коде вроде есть, но всё-же...
ava
check | 21.08.2007, 14:27 #
Цитата (dstorm81 @ 21.8.2007, 12:28 findReferencedText)
слюшай уважаемый, я смотрю тебя отвадили юзать innerHTML вместе с таблицами?

а ты пытался заново генерить полную таблицу и через innerHTML вставлять в див?
Я сейчас не через innerHTML вставляю:

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





Цитата (SamDark @ 21.8.2007, 12:47 findReferencedText)
В 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 ).
ava
dstorm81 | 21.08.2007, 15:13 #
код полностью
ava
check | 21.08.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>
ava
check | 21.08.2007, 15:58 #
SamDark, сходил по ссылке . А что там сделано не так, как у меня? или у меня не так как там?
В body у меня тоже таблица прекрасно вставляется, она вставляется и в div, но только не в InternetExplorer.
ava
SamDark | 21.08.2007, 16:25 #
check,
Возможно конфликты в глобальном пространстве имён. Попробуйте пока все переменные в функциях объявить локально, а не глобально. Завтра, как будет больше времени, проверю.
ava
check | 22.08.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>

Ничего не изменилось.
ava
check | 23.08.2007, 08:42 #
Бред конечно, но похоже придётся специально для IE сделать это через аякс.
То есть если не IE работает нормальный клиентский вариант, а если IE то аякс.
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit