Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Построение таблицы внутри дива.

Автор: Innuendo 3.3.2006, 22:02

При нажатии на кнопку стоится див, и в нём формируется таблица:

Код


function magicSquare(n){
var square=document.createElement("DIV");
/*Строим квадрат*/
square.className = "magic";
document.body.appendChild(square);
var tableSquare="<table border='1' id='magicTable' cellspacing='0' cellpadding='7'>";
tableSquare+="<th colspan='"+n+"'>Maqic Square</th>"
for (var i=1; i<=n+1; i++){
 tableSquare+="<tr align='center'>"
 for (var j=1; j<=n+1; j++){
  var id=i+"_"+j;
  tableSquare+="<td id='"+id+"' onclick='alert(this.id)'>0</td>";
  }
  tableSquare+="</tr>"
  }
  tableSquare+="</table>"
       /* тест*/
       for (i=1; i<=n; i++) {
         var idn = Number(n+1)+"_"+i;
          alert(document.getElementById(idn).innerHTML);
       }
     /*Конец теста*/
 square.innerHTML = tableSquare; 
 square.style.top=350;
 square.style.left=300;
 square.style.visibility="visible";
 
}

То что, обведено в комментарии "Тест", у меня не получается:
Мне надо сделать боковые ячейки другим цветом. Ну тут я уже упростил, потому что искал ошибку, тут он сканит по идее нижнюю строку таблицы. Для примера пусть алертит все значения нижней строки.
Консоль молчит, но он застопыривается на строке: alert(square.getElementById(idn).innerHTML);
Пробовал вместо idn определенный id заводить,и всё равно.
Думал, что почему-то он не задает элементам id. Но им задаёт. Ячейкам завел onclick='alert(this.id)', и при клике на ячейки ид номер выводится.

В чем проблема? как можно обратится к этим элементам?

Автор: Ciber SLasH 4.3.2006, 00:34

Цитата(Innuendo @ 3.3.2006, 22:02

)

То что, обведено в комментарии "Тест", у меня не получается:

И не получится, ведь ты построенную таблицу ещё никуда не подключил, она в этом месте ещё висит в воздухе.
Кстати функцию определяй перед HEAD, а вызывай после BODY, а то твоя функция по другому не захотела запускаться.

Автор: Innuendo 4.3.2006, 00:46

ну она у меня в хеде, и вызывается в боди, да.

А как мне тогда поступить? ещё такая проблема: див не хочет выравниваться первый раз. то есть я сделал чтоб он выравнивался по центру. Нажимаю первый раз- он абы где вылазит, закрываю его, открываю заново и по центру.
Ошибка в том, что первый раз его ширина и длина равна 4 пикселя. Так как таблица не входила в див.
А как можно исправить?
я попробовал так: сделал пустой див вручную в ХТМЛ. но всё равно первый раз он берет его пустую ширину и длину.. и к элементам таблицы тоже не может обратится smile

Автор: Ciber SLasH 4.3.2006, 01:14

Давай по порядку, я уже запутался что нужно. Опиши по пунктам что хочешь сделать.

Автор: Innuendo 4.3.2006, 12:19

1) чтобы этот див выводился по центру экрана
2) крайние ячейки таблицы выводились другим стилем (ну мне главное, как обратится вообще в к ячейкам, а уже к тем, что мне нежно я обращусь smile

)

Автор: Zaman 4.3.2006, 15:14

1. Сначал нужно построить Таблицу, у тебя в 7 строке пропущено '<TR>'
2. Добавить таблицу в DIV.
3. Добавить DIV в тело документа.
Я бы так сделал.
Таблицу бы строил не при помощи innerHTML, а - createElement().
Пример построений:

Код


var table = document.createElement("table");
table.setAttribute("border", "1");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("th");
// reusing the same variable name in the loop
// begin table heading information
td.appendChild(document.createTextNode("ля-ля-ля"));
tr.appendChild(td);
td = document.createElement("th");
td.appendChild(document.createTextNode("ля-ля-ля"));
tr.appendChild(td);
td = document.createElement("th");
td.appendChild(document.createTextNode("ля-ля-ля"));
tr.appendChild(td);
tbody.appendChild(tr);
// end table heading information
table.appendChild(tbody);
document.body.appendChild(table);

Автор: Innuendo 4.3.2006, 15:21

Zaman,
спасибо, мне надо таблицу n*n, ну я уже там в цикле думаю сделаю.
А вот по поводу 7-ой строки. А что, обязательно <th> обводить в <tr>? на сколько я знаю, это самостоятельный элемент, или я не прав? smile

Автор: Zaman 4.3.2006, 15:27

не прав

А как ты хочешь обратиться к ячейкам ?

Автор: Innuendo 4.3.2006, 15:33

то есть заголовк таблицы будет выглядеть так:
<tr><th colspan=x>Загловок</th></tr>
?

Автор: Zaman 4.3.2006, 15:34

да

Автор: Innuendo 4.3.2006, 16:17

ок, спасибо, получилось.

Попутный вопрос:
как выронвять построенную таблицу? ну задать ячейкам одну ширину- максимальную то есть.

Автор: Zaman 4.3.2006, 17:04

Спроси в разделе верстки, ведь это раздел JS ;)

Автор: Innuendo 4.3.2006, 21:03

Всё, ок.. у меня там был скрипт, ищет самую большу ширину, и всем столбцам её задает.

Проблема решена. Вопрос исчерпан.

Всем спасибо smile