Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   динамическое создание тадлицы (https://javascript.ru/forum/dom-window/1744-dinamicheskoe-sozdanie-tadlicy.html)

magistr_bender 11.09.2008 17:24

динамическое создание тадлицы
 
как создать таблицу с помощью createElement и заполнить её полями?

ZoNT 11.09.2008 17:56

какими полями?

magistr_bender 11.09.2008 18:55

я имал ввиду добавить в неё <tr> и <td>
но с этим я разобрался уже)
но теперь другая проблемма.. почему в ие неработает вариант

<input type="submit" value="Create" name="create" onclick="create_control()" />


<script language="JavaScript" type="text/javascript">
function create_control() {
        var e;
            e=document.createElement('table');
            e.setAttribute("width","100");
            e.setAttribute("height","100");
            e.setAttribute("border","1");
        e.style.position = 'absolute';
        document.body.appendChild(e);
}
</script>

а в опере и лисе пашет

ZoNT 11.09.2008 19:01

потому что таблица в ИЕ должна содержать tbody в обязательном порядке.

Используй table.insertRow(number) и table.rows[number].inserCell(number2) для вставки строк и ячеек (в строки). Тогда не надо думать о добавлении tbody, так как он создастся автоматически. Это родные методы таблицы и они работают быстро.

magistr_bender 11.09.2008 19:13

спасибо, буду пробовать

magistr_bender 11.09.2008 19:19

чёт неполучается вставить...
e.table.insertRow(1)

Kolyaj 11.09.2008 20:23

e.insertRow(-1); // если -1, то вставляется в конец

magistr_bender 11.09.2008 22:35

а параметры ровов и целов как задать тогда?

и кстати всё равно неработает

ZoNT 11.09.2008 22:55

var table = document.createElement('table');
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = 'йа ячейго';

document.body.appendChild(table);


или

var table = document.createElement('table');
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = '111';
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = '222';

document.body.appendChild(table);

magistr_bender 11.09.2008 23:10

о, пасибо .. теперь пашет во всех браузерах

magistr_bender 12.09.2008 00:34

при создании динамической таблицы почемуто неполучается указать свойства целспэйсин и целпаддинг
вот код
var vjtwindow;
function create_control() {
if (!vjtwindow) {
        vjtwindow=document.createElement("table");
        vjtwindow.setAttribute("cellpadding","0");
        vjtwindow.setAttribute("cellspacing","0");
        vjtwindow.setAttribute("id","vij-table");


    var newRow=vjtwindow.insertRow(0);
    var newCell = newRow.insertCell(0);
        newCell.setAttribute("align", "right");
        newCell.innerHTML="<img src=\"skins/standart/images/21.png\" border=\"0\"/>";

    var newCell = newRow.insertCell(1);
        newCell.setAttribute("id","vjt-table-top");
        newCell.innerHTML="";

    var newCell = newRow.insertCell(2);
        newCell.setAttribute("align","left");
        newCell.innerHTML="<img src=\"skins/standart/images/24.png\" border=\"0\"/>";

    var newRow=vjtwindow.insertRow(1);
    var newCell = newRow.insertCell(0);
        newCell.innerHTML="<img src=\"skins/standart/images/29.png\" border=\"0\"/>";

    var newCell = newRow.insertCell(1);
        newCell.setAttribute("id","vjt-table-bottom");
        newCell.innerHTML="";

    var newCell = newRow.insertCell(2);
        newCell.setAttribute("align","right");
        newCell.innerHTML="<img src=\"skins/standart/images/28.png\" border=\"0\"/>";

    var newRow=vjtwindow.insertRow(1);
    var newCell = newRow.insertCell(0);
        newCell.setAttribute("id","vjt-table-left");
        newCell.innerHTML="";

    var newCell = newRow.insertCell(1);
        newCell.setAttribute("id","vjt-tab");
        newCell.setAttribute("vlign","top");
        newCell.innerHTML="<b>23</b>";

    var newCell = newRow.insertCell(2);
        newCell.setAttribute("align","right");
        newCell.setAttribute("id","vjt-table-right");
        newCell.innerHTML="";
document.body.appendChild(vjtwindow);
}
}


а именно по какойто причине
vjtwindow.setAttribute("cellpadding","0");
vjtwindow.setAttribute("cellspacing","0");

не оказывает никакого воздействия, пробовал закинуть в css но всёравно невыходит..

ZoNT 12.09.2008 00:37

vjtwindow.cellPadding = 0;
vjtwindow.cellSpacing = 0;


newCell.setAttribute("id","vjt-table-right"); зачем???
newCell.id = "vjt-table-right"; короче почти в 2 раза!!!

magistr_bender 12.09.2008 00:51

хм.. чёт не подумал..
а за подсказку пасиб

AndyRoot 09.03.2009 12:53

Здесь подробно расписано как программно строить и менять таблицы. Работает в IE, Firefox и Opera

Bajjy 23.07.2009 17:36

создаю таблицу, в принципе, стандартным методом:
var table = document.createElement('table');
	table.style.borderCollapse = 'collapse'
	table.style.position = "absolute"
	table.style.width = xlen*cellwd+'px'
	table.style.height = ylen*cellhg+'px'
	table.style.borderWidth = '0px'
	table.style.borderStyle = 'solid'
	table.id=tid
	for (var k = 0; k < 50; k++) {
		var row = table.insertRow(-1);
		for (var j = 0; j < 50; j++) {
			var cell = row.insertCell(-1);
			cell.style.width = cellwd+'px'
			cell.style.height = cellhg+'px'
			cell.style.borderWidth = '1px'
			cell.style.borderStyle = 'solid'
			cell.style.borderColor = '#cccccc'
			cell.innerHTML = " ";
		}

однако, после выполнения кода браузер начинает дико нагружать процессор. возможно, я что-то неправильно делаю?
firefox 3.5.1


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