Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2010, 21:37
Новичок на форуме
Отправить личное сообщение для al666 Посмотреть профиль Найти все сообщения от al666
 
Регистрация: 21.04.2010
Сообщений: 4

сгенеритьтабличку под IE
<!--
Есть вот такой код, генерирующий таблицу в Опере, но напрочь в IE. Потратил вечер на изучение span, col и т.д. атрибутов/свойств... хелп плз


Есть простая задача, сгенерить таблицу javascript'ом, примерно такую:
______
|_____|
|__|__|
число столбцов во второй строке может измениться.
-->
<HEAD>
<STYLE>
TD {
border-collapse:collapse;
border:solid windowtext 1.0px;
text-align:center;
font-size:7.0pt;
padding:0px;
}
.Tablica {
border-collapse:collapse;
border:solid windowtext 1.0px;
table-layout:fixed;
text-align:center;
font-size:12.0pt;
}
.TH1_ {
border-collapse:collapse;
border:solid windowtext 1.0px;
text-align:center;
font-size:12.0pt;
}
col {
text-align:center;
width:17px;
}
</STYLE>
</HEAD>
<BODY>
<script>
var _parent=document.body;
var newTabl=document.createElement('table');
newTabl.className='Tablica';
newTabl.width='31*';
var newTB=document.createElement('tbody');
var newCol=document.createElement('col');
newCol.span='31';
var newTr1=document.createElement('tr');
var newTr2=document.createElement('tr');
var newTh1=document.createElement('th');
newTh1.className='TH1_';
newTh1.colspan='31';
newTh1.setAttribute('colspan', '31'); //не знаю наверняка для IE

newTB.appendChild(newCol);
newTh1.appendChild(document.createTextNode("string 1"));
newTr1.appendChild(newTh1);
newTB.appendChild(newTr1);
for (var i=0; i<31; i++) {
var newTD=document.createElement('td');
newTD.appendChild(document.createTextNode(i+1));
newTr2.appendChild(newTD);
}
newTB.appendChild(newTr2);
newTabl.appendChild(newTB);
_parent.appendChild(newTabl);
</script>
</BODY>
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2010, 07:35
Новичок на форуме
Отправить личное сообщение для al666 Посмотреть профиль Найти все сообщения от al666
 
Регистрация: 21.04.2010
Сообщений: 4

Нашёл глюк: colspan=31 работает только как colSpan=31;

Атрибут width="31*" не работает, если указать точную длину width="527" то нормально строит.
Однако при нединамическом построении
<table class="Tablica" width="31*">
работает.

Элемент <Col> вообще ничего не даёт либо его свойства span=31 width=17 нужно задавать как-то иначе, т.е. объявление нескольких столбцов точной длины просто игнорируется.
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2010, 08:42
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от al666
Нашёл глюк: colspan=31 работает только как colSpan=31;
Никакой это не глюк, а ваша ошибка. В JavaScript свойства именуются в стиле lowerCamelCase.
Сообщение от al666
Атрибут width="31*" не работает, если указать точную длину width="527" то нормально строит.
Свойство и атрибут — разные вещи http://xpoint.ru/know-how/JavaScript/Atributyi
Сообщение от al666
Элемент <Col> вообще ничего не даёт либо его свойства span=31
Сообщение от http://htmlbook.ru/html/col.html
span Количество колонок, к которым следует применять параметры.
И оформляйте свой код: http://javascript.ru/formatting

Последний раз редактировалось Octane, 22.04.2010 в 08:52.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2010, 10:13
Новичок на форуме
Отправить личное сообщение для al666 Посмотреть профиль Найти все сообщения от al666
 
Регистрация: 21.04.2010
Сообщений: 4

по существу - 0
За "span" отдельное спасибо, я его так влепил, бездумно.

Вопрос такой, createElement('col') даёт что-либо или это не работает в IE, после создания и установки свойств их можно прочесть, однако на экране изменений нет.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2010, 11:04
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

В IE то работает. И в Firefox работает, а вот Opera и Chrome не реагируют:
<table border="1">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</table>
<button onclick="F()">Enlarge width</button>
<script type="text/javascript">
function F() {
	var table = document.getElementsByTagName("table")[0];
	var colgroup = document.createElement("colgroup");
	var col = document.createElement("col");
	col.span = 2;
	col.width = 200;
	colgroup.appendChild(col);
	table.appendChild(colgroup);
}
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2010, 16:52
Новичок на форуме
Отправить личное сообщение для al666 Посмотреть профиль Найти все сообщения от al666
 
Регистрация: 21.04.2010
Сообщений: 4

От спасибо, элемент 'colgroup' действительно выправил мой кривой код, получилось то что надо, за небольшой мелочью - таблица фиксированной длины только в IE, а Опера сдвигает при изменении размера окна. Зафиксировать без явного указания размера всей таблицы не выходит.

<html><head><title>Project</title>
<style>col {width:140px;} table {table-layout:fixed;}</style>
</head>

 <body><script>
    var _parent=document.body;
    var newTabl=document.createElement('table');
    var newTB=document.createElement('tbody');
    var colgroup = document.createElement('colgroup');
    var newCol=document.createElement('col');
    var newTr=document.createElement('tr');
    var newTh=document.createElement('th');
    var newTr2=document.createElement('tr');
    var newTd1=document.createElement('td');
    var newTd2=document.createElement('td');
    var newTd3=document.createElement('td');

     newTabl.border=1;
     newTh.colSpan=3;
     newCol.span=3;

     colgroup.appendChild(newCol);
     newTB.appendChild(colgroup);

        newTh.appendChild(document.createTextNode("0"));
       newTr.appendChild(newTh);
      newTB.appendChild(newTr);

        newTd1.appendChild(document.createTextNode("1"));
        newTd2.appendChild(document.createTextNode("2"));
        newTd3.appendChild(document.createTextNode("3"));
       newTr2.appendChild(newTd1);
       newTr2.appendChild(newTd2);
       newTr2.appendChild(newTd3);
      newTB.appendChild(newTr2);
     newTabl.appendChild(newTB);
    _parent.appendChild(newTabl);
  </script></body></html>


Кстати, вот такой статичный вариант отрабатывает одинаково как в IE так и Opera:
<html><head><title>Project</title>
  <style>col {width:140px;} table {table-layout:fixed;width:0;}</style>
 </head>

 <body>
   <table border=1>
    <col span=3>
     <tr><th colSpan=3>0</th></tr>
     <tr><td>1</td><td>2</td><td>3</td></tr>
</table></body></html>
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2010, 16:54
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Кстати, для работы с таблицами предусмотрены специальные методы и коллекции http://webew.ru/articles/598.webew
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05
Как писать скрипты под Opera? ucsus (X)HTML/CSS 2 15.04.2009 13:07
Верстка под КПК demi (X)HTML/CSS 6 31.01.2009 11:33
GetVariable (flash) не работает под FireFox Vodan Общие вопросы Javascript 2 21.12.2008 17:26
Выезжание таблицы из под ниоткуда. lancer Элементы интерфейса 3 29.06.2008 15:03