Динамическая таблица
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 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>
|
Цитата:
<!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>
|
<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>
|
Не пойму только почему в IE myTable.innerHTML = str; не срабатывает.
|
Цитата:
Цитата:
|
Всем спасибо, хоть что-то прояснилось. Дальше думаю разберусь. Видимо надо почитать про замыкания. Ох уж эти языки высокого уровня. ;)
|
melky, спасибо за пояснение.
|
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(). Теперь хоть всё прояснилось. Но еще ведь есть слои. Я просто новичок в этом деле. Разберусь. Спасибо. :) |
mixxer, а innerText?
|
| Часовой пояс GMT +3, время: 23:45. |