Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Динамическая таблица (https://javascript.ru/forum/misc/28740-dinamicheskaya-tablica.html)

mixxer 31.05.2012 18:35
Динамическая таблица
 
Data = new Array('a','b','c','d','e');
var Mytable=document.createElement('table'); 
document.body.appendChild (Mytable);

for (i=0; i<Data.length; i++) {
var newrow=Mytable.insertRow(i);
var newcell = newrow.insertCell(i);
newcell.setAttribute('id', i);
...
...   // Задача: прицепить onClick ячейке newcell на обработчик, который пишет в ячейку элемент из массива Data.
}


Народ, помогите, я за 3 дня устал, чесслово. )

Джэксон 31.05.2012 19:05
попробуйте такой вариант как пример и подгоните под себя :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	data = new Array('a','b','c','d','e');
	document.write('<table>');
	var a='Онклик повешен';
	 for (i=0; i<=data.length; i++) {
document.write('<tr><td onclick="alert(a);">1</td></tr>');
	}
	document.write('</table>');
	</script>
</head>

<body>

</body>
</html>

melky 31.05.2012 19:36
Цитата:
Сообщение от mixxer (Сообщение 177808) 
Data = new Array('a','b','c','d','e');
var Mytable=document.createElement('table'); 
document.body.appendChild (Mytable);

for (i=0; i<Data.length; i++) {
var newrow=Mytable.insertRow(i);
var newcell = newrow.insertCell(i);
newcell.setAttribute('id', i);
...
...   // Задача: прицепить onClick ячейке newcell на обработчик, который пишет в ячейку элемент из массива Data.
}


Народ, помогите, я за 3 дня устал, чесслово. )
 
<!DOCTYPE HTML>
<html><head></head>
<body>
<script>
var Data = ["a", "b", "c", "d", "e"];
var myTable = document.createElement("table");
var i;
var newCell;

for(i = 0; i < Data.length; i++) {
    newCell = myTable.insertRow(i).insertCell();
    newCell.id = "num" + i; // id не должен начинаться с числа
    newCell.innerHTML = i;
    (function(i){ // это замыкание.
        newCell.onclick = function(){ alert(i); };
    })(i);
}

document.body.appendChild(myTable);
</script>
</body></html>

bes 31.05.2012 19:58 
<body>

<style>
  td {border: solid 1px; width: 20px; height: 20px; text-align: center; background: lightgrey}
</style>

<script>
window.onload = function () {
  var data = new Array('a', 'b', 'c', 'd', 'e');
  var length = data.length;

  var row = '<tr><td></td></tr>';
  var str = '';

  for (var i = 0; i < length; i++) {
    str += row;
  }

  var myTable = document.createElement('table'); 
  document.body.appendChild (myTable);
  myTable.innerHTML = str;

  myTable.onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;

    for (var i = 0; i < length; i++) {
      if (target.parentNode == myTable.rows[i]) {
       target.innerHTML = data[i]; 
        return;
      }
    }
  }

}
</script>

bes 31.05.2012 20:22
Не пойму только почему в IE myTable.innerHTML = str; не срабатывает.

melky 31.05.2012 20:51
Цитата:
Сообщение от bes (Сообщение 177827)
Не пойму только почему в IE myTable.innerHTML = str; не срабатывает.
msdn:
Цитата:
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

mixxer 31.05.2012 21:15
Всем спасибо, хоть что-то прояснилось. Дальше думаю разберусь. Видимо надо почитать про замыкания. Ох уж эти языки высокого уровня. ;)

bes 31.05.2012 21:46
melky, спасибо за пояснение.

mixxer 01.06.2012 14:38
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

td здесь не указано. :)

Наверное, тогда буду удалять и заново вставлять ячейку deleteCell() insertCell(). Теперь хоть всё прояснилось.
Но еще ведь есть слои. Я просто новичок в этом деле. Разберусь.

Спасибо. :)

GuardCat 01.06.2012 15:08
mixxer, а innerText?

mixxer 01.06.2012 15:11
Цитата:
Сообщение от GuardCat (Сообщение 177937)
mixxer, а innerText?
Во, точно, спасибо. Буду разбираться, я просто реально первый раз сайт делаю. :)

У меня маленькая галерея, внешние ссылки хочу спрятать от поисковиков. Говорят за большое их количество поисковики банят сайт. И дергать станицу, естественно, лишний раз не хочется. Вывожу сразу рамку пустую и пусть юзер в нее жмет.


Часовой пояс GMT +3, время: 14:15.