Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   создание таблицы в ячейке (https://javascript.ru/forum/misc/12432-sozdanie-tablicy-v-yachejjke.html)

zatoichi 17.10.2010 15:42

создание таблицы в ячейке
 
function WriteTable(H,U){		
	div = document.createElement("div");	
	div.setAttribute("id","set");		
	div.innerHTML = '<b style="text-align:center; font-size:10px;">'+H+'&nbsp;'+U+'</b>';
	document.getElementById('BOX').appendChild(div);	
	var table = document.createElement('table');
	
	for (i=0; i<c; i++){
		var row  = table.insertRow(-1);
		row.setAttribute("align","center");
	    for (j=0; j<r; j++){
			var cell = row.insertCell(-1);
            cell.innerHTML = m[i][j];
		}
    }
	div.appendChild(table);	
}



Вот отредактировал , все нормально работает. Создаю функцией N таблиц.
Подскажите пожалуйста, как получить доступ к N-2 (хотя тут не суть важно) таблице для её редактирования.

monolithed 17.10.2010 15:56

вначале исправите ошибки в коде!
var row = HTMLTableElement.insertRow(index);

Jurasmi 20.10.2010 14:50

Цитата:

Подскажите пожалуйста, как получить доступ к ... таблице для её редактирования.
Я так понял вопрос:
я создал много всяких таблиц на страничке, и теперь хочу в одной их них что-то поменять, как это сделать?

Можно сделать так: одним скриптом вы создаёте HTML-элементы (таблицы), а редактировать их можно другим скриптом, т.е. как-то выбирать html-элементы:
document.getElementById('element id');
document.getElementsByTagName('element_name');

и т.д.

Как именно достучаться до "N-2" таблице надо смотреть в конкретном случае, покажите разметку, что получилось?

Второй вариант: вы хотите при создании "N-2" таблицы сразу запомнить её для последующего редактирования?
var editableTable,  //тут будет ссылка на n-2 таблицу
	n = 5;

function WriteTable(tableIndex){		
	var c = 3,
		r = 3,
		m = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];
	
	var table = document.createElement('table');
	
	for(i=0; i<c; i++){
		var row  = table.insertRow(-1);
		row.setAttribute("align","center");
	    for (j=0; j<r; j++){
			var cell = row.insertCell(-1);
            cell.innerHTML = m[i][j];
		}
    }
	document.getElementById('BOX').appendChild(table);	
	
	if(tableIndex == (n-2)-1){
		editableTable = table;
	}
};

//создание "n" таблиц
for(var k=0; k<=n-1; k++){
	WriteTable(k);
};

Это работает, если вы наперед знаете количество создаваемых таблиц.



var editableTable,  //тут будет ссылка на "n-2" таблицу
	n = 5,
	funInv = 0,
	tableClass = 'appended';

	
function WriteTable(){		
	var c = 3,
		r = 3,
		m = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];
	
	var table = document.createElement('table');
	table.setAttribute("class", tableClass);
	
	for(i=0; i<c; i++){
		var row  = table.insertRow(-1);
		row.setAttribute("align","center");
	    for (j=0; j<r; j++){
			var cell = row.insertCell(-1);
            cell.innerHTML = m[i][j];
		}
    }
	document.getElementById('BOX').appendChild(table);	
	
	funInv++;  //сколько таблиц уже наплодили
};


//создание таблиц
for(var k=0; k<=n-1; k++){
	WriteTable();
};


var tables = document.getElementsByTagName('TABLE'),
	curTableIndex = 0;
	
for(var k=0, len=tables.length; k<=len-1; k++){
	if(tables[k].className == tableClass){
		curTableIndex++;
		if(curTableIndex == funInv-2){
			editableTable = tables[k];
			break;
		}
	}
};

Для этого кода не важно где и когда были динамически созданы таблицы.

Какой из вариантов ваш?

zatoichi 21.10.2010 09:06

Спасибо за столь подробный ответ.
Мой 2ой вариант.

Еще вопрос :

А если хочется удалять таблицу при клике на нее.


При создании таблиц даем им set.Attribute("id","tab"+(buf++));
По клику получаем атрибут "id" функцией getAttribute и удаляем таблицу через element.removechild(ggg)


Реализация будет примерно таковой?

Jurasmi 21.10.2010 12:07

document.getElementById('BOX').onclick = function(e){
	e = e || window.event;
	var curEl = e.target || e.srcElement;
	
	do{
		if(curEl.className == tableClass){
			curEl.parentNode.removeChild(curEl);
			break;
		}
		curEl = curEl.parentNode;
	}while(curEl != document);
};

тут код, который при клике удаляет таблицу с классом "tableClass". Все таблицы (которые могут быть удалены) должны находится в одном общем контейнере с id - "BOX", если такого контейнера нет, то вместо
document.getElementById('BOX').onclick

можно написать
document.onclick


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