Показать сообщение отдельно
  #1 (permalink)  
Старый 22.09.2009, 16:26
Интересующийся
Отправить личное сообщение для alex.v Посмотреть профиль Найти все сообщения от alex.v
 
Регистрация: 22.09.2009
Сообщений: 11

свойства width и height в IE....
Доброго времени суток.

Мне нужно сделать функцию создания таблиц,
вот собственно функция(и), кроме всего прочего в шапке таблицы должны создаваться кнопки для возможности редактирования параметров самой таблицы(ну это лирика, важен факт наличия кнопок в хедере.)

*ОФФТОП* Заранее сорри за большое сообщение.

логика функции здесь :

this.addEmptyTable = function(dstTarget, rowNum, colNum, className, arrStylesTd, arrStyleTab) {
        var userAgent = "";
        if (navigator.userAgent.match('MSIE')) {
            userAgent = "ie";
        }
        var table, thead, tbody, tr, td, dragTr, saveLink;
        table = createElem("table", "contTab_" + id, dstTarget, arrStyleTab);
        thead = createElem("thead", "", table, null);
        dragTr = createElem("tr", "dragTr_" + id, thead, null);
        td = createElem("td", "", dragTr, new Array(new Array("height", "20px")));



        if (userAgent == "ie") { 
            var newElSaveLink = document.createElement("input");// вот эта самая кнопка в хедере
            newElSaveLink.id = id + "_editBut";
            newElSaveLink.type = "button";
            newElSaveLink.value = "Edit";
            newElSaveLink.style['cursor'] = "pointer";
            if (td) {
                td.appendChild(newElSaveLink);
            }
        }
        else {
            td.setAttribute("colspan", colNum);
            table.setAttribute("border", "2");
// вот эта самая кнопка в хедере
            saveLink = createElem("input", id + "_editBut", td, new Array(new Array("width", "50px"), new Array("cursor", "pointer")));
            document.getElementById(id + "_editBut").setAttribute("type", "button");
            document.getElementById(id + "_editBut").setAttribute("value", "Edit");
        }


        tbody = createElem("tbody", "", table, null);
        var counter = 1;
        for (var i = 0; i < rowNum; i++) {
            tr = createElem("tr", "", tbody);
            for (var j = 0; j < colNum; j++) {
                td = createElem("td", "contTd" + counter + "_" + id, tr, arrStylesTd);
                counter++;
            }
        }
        return table;
    }
}


далее сама функция которая создает и апендит то что мне надо:

var createElem = function(tagName, id, destTarget, arrStyles) {
        var newEl = document.createElement(tagName);
        newEl.id = id;
        var styleElem, styleValue;
        if (arrStyles && arrStyles.length > 0) {
            for (var i = 0; i < arrStyles.length; i++) {
                styleElem = arrStyles[i][0];
                styleValue = arrStyles[i][1];
                newEl.style[styleElem] = styleValue;
            }
        }
        if (destTarget) {
            destTarget.appendChild(newEl);
        }
        return newEl;
}


это преамбула.

вызываю функцию так:

stArTd = new Array(); // массив стилей для td
stArTd[0] = new Array("background", "red");
//stArTd[1] = new Array("width", "50px");
//stArTd[2] = new Array("height", "50px");


stArTab = new Array(); // массив стилей для table
stArTab[0] = new Array("position", "absolute");
stArTab[1] = new Array("top", "200px");
stArTab[2] = new Array("left", "200px");
stArTab[3] = new Array("width", "300px");
stArTab[4] = new Array("height", "300px");


var comT = new comTable(cCommon.GetGuid());

comT.addEmptyTable(document.getElementById(dropTarget), 3, 3, null, stArTd, stArTab); //вызывем функцию, на dropTarget не обращаем внимание, это то, куда таблица и апендится


Проблема в том, что если задавая параметры width и height самой таблицы (в массиве стилей stArTab) и при этом не задавая width и height для td (в массиве стилей stArTd), везде кроме IE создается и отрисовывается нормальная табличка, с пропорцианальными td-шками, т.е. равного размера ячейками,
в IE же, огромного размера thead в нем кнопка и малюсенькие ячейки самой таблицы.



если же задать width и height для td (закоментированные //stArTd[1] = new Array("width", "50px"); и //stArTd[2] = new Array("height", "50px"))

то все нормально



в чем проблема??

тяжело было все это описать, т.к. исходный код в разы больше и пришлось выдирать, поэтому если что-то непонятно, то пожалуйста спросите, я постраюсь объяснить.

любая критика по поводу кода и логики приветствуется, я пока еще нуП ))

Заранее спасибо!!!
Ответить с цитированием