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

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

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

Автор: 123 16.8.2007, 17:34

Вот html текст:

Код


<DIV id="ID_hint" style="width:200px; height:200px; position:absolute; left:50px; top:50px; visibility:hidden; CURSOR: help;">
<TABLE cellSpacing=0 cellPadding=3 width="200" border=0 style="border:1px solid #000000; CURSOR: help;">
<TR><TD style="COLOR: green; CURSOR: help;" bgColor=#ffffe1>
                <p align="center">TEST</p>
 </TD></TR></TABLE></DIV>

Надо тоже самое сделать на js.
Вот что получилось у меня:

Код


function addtablerror(id,text)
{

var div = document.createElement("div");
    div.id=id+'_hint';
    div.style.width='200px';
    div.style.height='200px';
    div.style.position='absolute';
    div.style.left='50px';
    div.style.top='50px';
    div.style.visibility='visible';
    div.style.cursor='help';
var table = document.createElement("table");
    table.style.border='1px';
    table.style.solid='#000000';
    table.cellSpacing='0';
    table.cellPadding='3';
    table.width='200';
var tr = document.createElement("tr");
var td = document.createElement("td");
    td.style.color='green';
    td.bgColor='#ffffe1';
    td.innerHTML=text;

tr.appendChild(td);
table.appendChild(tr);
div.appendChild(table);
document.body.appendChild(div);

}

Он создает примерно то что надо, но ОЧЕНЬ криво. Есть преположения, что я объекты таблицы неправильно создаю..
Покажите пожалуйста на мои ошибки.

Автор: Astraller 16.8.2007, 19:56

Уважаемый, разберить сначала со style'выми свойствами JS.
К примеру нет свойства node.style.solid!
Есть node.style.border="1px solid #000;"

smile

Автор: 123 16.8.2007, 23:11

Исправил, спасибо.

А какие есть идеи по самому коду? Ведь он явно как-то криво написан.

Автор: dXdYdZ 17.8.2007, 00:04

В своей библиотеке для этих целей я сделал функцию mixin:

Код


JSL.mixin=function(obj1,obj2)
{
for(var n in obj2) obj1[n]=obj2[n];
}

Теперь Ваш код можно переписать так:

Код


function addtablerror(id,text)
{
var div = document.createElement("div");
    div.id=id+'_hint';
    JSL.mixin(div.style,{width: "200px",height: "200px",position: "absolute",left: "50px",top:"50px",visibility: "visible",cursor: "help"});
var table = document.createElement("table");
    table.style.border='1px solid #000';
    mixin(table,{cellSpacing: 0,cellPadding: 0,width: 200});
var tr = document.createElement("tr");
var td = document.createElement("td");
    td.style.color='green';
    mixin(td,{bgColor: "#ffffe1",innerHTML: text});
tr.appendChild(td);
table.appendChild(tr);
div.appendChild(table);
document.body.appendChild(div);
}

Добавлено через 2 минуты и 11 секунд
А ещё для задания стилей можно использовать свойство cssText:

Код


node.style.cssText="border: 1px solid #000; width: 200px; height: 200px;";

И так далее...

Автор: Ghirik 30.8.2007, 11:32

Класно, dXdYdZ, хороший подробный ответ, сейчас и испытаем.

P.S.Жалко, ещё не могу плюсики ставить.

Автор: Ghirik 31.8.2007, 08:43

Вот попробовал:

Код


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<script language="javascript">
<!--
function mixin(obj1,obj2){
    for    (var n in obj2) obj1[n]=obj2[n];
}

function addtablerror(id,text)
{
var div = document.createElement("div");
    div.id=id+'_hint';
    mixin(div.style,{width: "200px",height: "200px",position: "absolute",left: "50px",top:"50px"});
var table = document.createElement("table");
    table.style.border='3px solid #000';
    mixin(table,{cellSpacing: 0,cellPadding: 0,width: 400});
var tr = document.createElement("tr");
var td = document.createElement("td");
    //td.style.color='green';
    mixin(td,{innerHTML: text});
tr.appendChild(td);
table.appendChild(tr);
div.appendChild(table);
document.body.appendChild(div);
}

//-->
</script>
</head>
<body>
<div id=div1></div>
<p><a href=# onClick="addtablerror(div1,'fgfgffhh fhfgfghfhg')">dfgdfgdfgdfdfg</a></p>
</body>
</html>

Но, в IE не работает. Почему?
Смотрел под IE, объекты создаются, свойства присваиваются. Чего то он не понимает.

Автор: MisterCleric 31.8.2007, 09:10

Вообще у тега teble его children могут быть THEAD, TFOOT, TBODY. Хоть обычно мы пользуемся TR, TD, но в сгенерированном HTML всегда они обернуты в TBODY. Так что если ты скриптом формируешь таблицу, то надо так:

Код


var tr = document.createElement("tr");
var td = document.createElement("td");
    //td.style.color='green';
    mixin(td,{innerHTML: text});
tr.appendChild(td);
var tbody = document.createElement("tbody");
tbody.appendChild(tr);
table.appendChild(tbody);
div.appendChild(table);

Ну а там разберись, как у тебя по коду должно быть.

Автор: Ghirik 31.8.2007, 09:23

Спасибо, всё заработало везде. smile