alex.v
22.09.2009, 17:26
Доброго времени суток.
Мне нужно сделать функцию создания таблиц,
вот собственно функция(и), кроме всего прочего в шапке таблицы должны создаваться кнопки для возможности редактирования параметров самой таблицы(ну это лирика, важен факт наличия кнопок в хедере.)
*ОФФТОП* Заранее сорри за большое сообщение.
логика функции здесь :
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(dropTar get), 3, 3, null, stArTd, stArTab); //вызывем функцию, на dropTarget не обращаем внимание, это то, куда таблица и апендится
Проблема в том, что если задавая параметры width и height самой таблицы (в массиве стилей stArTab) и при этом не задавая width и height для td (в массиве стилей stArTd), везде кроме IE создается и отрисовывается нормальная табличка, с пропорцианальными td-шками, т.е. равного размера ячейками,
в IE же, огромного размера thead в нем кнопка и малюсенькие ячейки самой таблицы.
http://img.uz/d/2009/09/4ab8cdadbac55.jpg
если же задать width и height для td (закоментированные //stArTd[1] = new Array("width", "50px"); и //stArTd[2] = new Array("height", "50px"))
то все нормально
http://img.uz/d/2009/09/4ab8ce7ae7380.jpg
в чем проблема??
тяжело было все это описать, т.к. исходный код в разы больше и пришлось выдирать, поэтому если что-то непонятно, то пожалуйста спросите, я постраюсь объяснить.
любая критика по поводу кода и логики приветствуется, я пока еще нуП ))
Заранее спасибо!!!
Мне нужно сделать функцию создания таблиц,
вот собственно функция(и), кроме всего прочего в шапке таблицы должны создаваться кнопки для возможности редактирования параметров самой таблицы(ну это лирика, важен факт наличия кнопок в хедере.)
*ОФФТОП* Заранее сорри за большое сообщение.
логика функции здесь :
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(dropTar get), 3, 3, null, stArTd, stArTab); //вызывем функцию, на dropTarget не обращаем внимание, это то, куда таблица и апендится
Проблема в том, что если задавая параметры width и height самой таблицы (в массиве стилей stArTab) и при этом не задавая width и height для td (в массиве стилей stArTd), везде кроме IE создается и отрисовывается нормальная табличка, с пропорцианальными td-шками, т.е. равного размера ячейками,
в IE же, огромного размера thead в нем кнопка и малюсенькие ячейки самой таблицы.
http://img.uz/d/2009/09/4ab8cdadbac55.jpg
если же задать width и height для td (закоментированные //stArTd[1] = new Array("width", "50px"); и //stArTd[2] = new Array("height", "50px"))
то все нормально
http://img.uz/d/2009/09/4ab8ce7ae7380.jpg
в чем проблема??
тяжело было все это описать, т.к. исходный код в разы больше и пришлось выдирать, поэтому если что-то непонятно, то пожалуйста спросите, я постраюсь объяснить.
любая критика по поводу кода и логики приветствуется, я пока еще нуП ))
Заранее спасибо!!!