Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Таблица на JS


Автор: Reptor 17.12.2007, 20:02
Делаю таблицу с помощью 
Код

document.createElement("table");


потом в конце делаю 
Код

tbl.appendChild(tblBody);
    tbl.setAttribute("border", "0");
    tbl.setAttribute("cellpadding", "0");
    tbl.setAttribute("cellspacing", "0");
    tbl.setAttribute("width", "652");


но всеровно есть вертикальные полосы которые разделяют столбики. Как их забрать вроде?? ж как всё обнулил.

Вот картинка. 

Автор: Ghirik 17.12.2007, 22:33
Это Вам поможет.

Код

<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,{position: "absolute",top:"20px",border:"1px solid #0000FF", width:"100%",height:"10px"});
var table = document.createElement("table");
    mixin(table,{cellSpacing: 0,cellPadding: 0,width: 400});
var tr = document.createElement("tr");
var td = document.createElement("td");
    mixin(td,{innerHTML: text});
tr.appendChild(td);
var tbody = document.createElement("tbody");
tbody.appendChild(tr);
table.appendChild(tbody);
div.appendChild(table);
document.body.appendChild(div);
}
//-->
</script>
</head>
<body>
<input value="HTML" type="button" onclick=alert(document.body.innerHTML)>
<div id=div1></div>
<p><a href=# onClick="addtablerror(div1,'')">dfgdfgdfgdfdfg</a></p>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" 
id="layer1">
&nbsp;</div>
</body>
</html>

Автор: bars80080 18.12.2007, 11:56
если бы вопрос был о css, то решение было бы
Код

{ border-collapse: collapse; }

Автор: Ghirik 18.12.2007, 21:09
Ну и в JavaScript-е тогда tbl.setAttribute("borderСollapse", "collapse");

Автор: Reptor 19.12.2007, 12:09
Ghirik,  
Цитата

Ну и в JavaScript-е тогда tbl.setAttribute("borderСollapse", "collapse");


что то не помогает да и что то id <td> не могу установить вот таким образом 
Код


    var cell = document.createElement("td");
                
            cell.id = "txtmembtb";

Автор: Ghirik 19.12.2007, 12:21
Reptor, выложите страничку с вашим созданием таблицы, как я выкладывал, от <html> до </html>. Я попробу разобраться.

Автор: Reptor 19.12.2007, 18:07
Да обычно делаю как я выше писал
 
Код

var content = document.getElementById("stats_content");  //это обычный див без стил я без ничего

var title_table_soft= new Array();

    
title_table_soft[0] = '1';
    title_table_soft[1] = '2
    title_table_soft[2] = '3';
    title_table_soft[3] = '4
    title_table_soft[4] = '5';
    title_table_soft[5] = '6';
    title_table_soft[6] = '7';
    title_table_soft[7] = '8';
    title_table_soft[8] = '9';

title_table = title_table_soft; 

var tbl     = document.createElement("table");
    //tbl.style = 'styleTable';
    var tblBody = document.createElement("tbody");
    
    var row = document.createElement("tr");
    
    for(j=0; j<title_table.length; j++){
        var cell = document.createElement("td");
        cell.style.background = "abbac2";
        cell.id = "txtmembtb";
        var cellText = document.createTextNode(title_table[j]);
        cell.appendChild(cellText);
        row.appendChild(cell);
    }
    tblBody.appendChild(row);    

tbl.appendChild(tblBody);
    //tbl.setAttribute("border", "0");
//    tbl.setAttribute("cellpadding", "0");
//    tbl.setAttribute("cellspacing", "0");
 tbl.setAttribute("borderСollapse", "collapse");
    tbl.setAttribute("width", "652");
    content.appendChild(tbl);


вот так вот.

Добавлено через 6 минут и 1 секунду
ну вот страничка
Код


<html>

<body>

<div id="stats_content">

</div>

</body>
<script type="text/javascript" language="JavaScript">
var content = document.getElementById("stats_content");  //это обычный див без стил я без ничего    
var title_table_soft= new Array();    
     alert(content);
title_table_soft[0] = '1';    
    title_table_soft[1] = '2';    
    title_table_soft[2] = '3';    
    title_table_soft[3] = '4';    
    title_table_soft[4] = '5';    
    title_table_soft[5] = '6';    
    title_table_soft[6] = '7';    
    title_table_soft[7] = '8';    
    title_table_soft[8] = '9';    
title_table = title_table_soft; 

var tbl     = document.createElement("table");    
    //tbl.style = 'styleTable';    
    var tblBody = document.createElement("tbody");    
     
    var row = document.createElement("tr");    
     
    for(j=0; j<title_table.length; j++){    
        var cell = document.createElement("td");    
        cell.style.background = "abbac2";    
        cell.id = "txtmembtb";    
        var cellText = document.createTextNode(title_table[j]);    
        cell.appendChild(cellText);    
        row.appendChild(cell);    
    }    
    tblBody.appendChild(row);    
    tbl.appendChild(tblBody);    
    //tbl.setAttribute("border", "0");    
//    tbl.setAttribute("cellpadding", "0");    
//    tbl.setAttribute("cellspacing", "0");    
 tbl.setAttribute("borderСollapse", "collapse");    
    tbl.setAttribute("width", "652");    
    content.appendChild(tbl);

</script>


</html>

Автор: Ghirik 19.12.2007, 20:18
У Вас все созданные элементы имеют один и тот же id
Я же специально выложил страничку с кнопкой
Код

<input value="HTML" type="button" onclick="alert(document.getElementById('stats_content').innerHTML)">

Этой кнопочкой можно смотреть какой html создается.
Нужно наверное вот так присваивать id:
Код

cell.id = "txtmembtb" + j;

Остальное пока не смотрел, попробуйте, если что дальше разберемся...

Добавлено через 8 минут и 23 секунды
Действительно, что то не получается убрать зазоры. Счас помучаю.....

Автор: Ghirik 19.12.2007, 21:03
Такой синтексис
Код

tbl.setAttribute("cellspacing", "0")

FF проглатывает, зазоры исчезают, а IE не понимает....

Автор: Ghirik 19.12.2007, 21:20
Нашел! Блин, вот задачка для .....
Вот так нужно:
Код

tbl.setAttribute("cellSpacing", "0")

Если "S" в атрибуте "cellSpacing" заглавная, то все нормально... smile 
А вообще, очень удобно проверять какие свойства у элемента есть в разных браузерах с помощью обхода этих свойств. Вот ваша страничка с функцией обхода свойств:
Код

<html>
<body>
<input value="HTML" type="button" onclick="alert(document.getElementById('stats_content').innerHTML)">
<div id="stats_content" onclick="qwe(document.getElementById('stats_content').firstChild)">
</div>
</body>
<script type="text/javascript" language="JavaScript">
var content = document.getElementById("stats_content");  //это обычный див без стил я без ничего    
var title_table_soft= new Array();    
title_table_soft[0] = '1';    
    title_table_soft[1] = '2';    
    title_table_soft[2] = '3';    
    title_table_soft[3] = '4';    
    title_table_soft[4] = '5';    
    title_table_soft[5] = '6';    
    title_table_soft[6] = '7';    
    title_table_soft[7] = '8';    
    title_table_soft[8] = '9';    
var title_table = title_table_soft; 
var tbl     = document.createElement("table");    
    var tblBody = document.createElement("tbody");    
    var row = document.createElement("tr");    
    for(j=0; j<title_table.length; j++){    
        var cell = document.createElement("td");    
        cell.style.backgroundColor = "abbac2";    
        cell.id = "txtmembtb" + j;    
        var cellText = document.createTextNode(title_table[j]);    
        cell.appendChild(cellText);    
        row.appendChild(cell);    
    }    
    tblBody.appendChild(row);    
    tbl.appendChild(tblBody);    
    tbl.setAttribute("width", "652");    
    tbl.setAttribute("cellSpacing", "0")
    content.appendChild(tbl);
function qwe(obj) {
    var result = "The properties for the " + obj + " object:" + "<br>";
    for (var i in obj) {
        result += i + " = " + obj[i] + "<br>";
    }
        document.body.innerHTML=result+'<br>'
}
</script>
</html>
Кликните по таблице

Автор: Reptor 20.12.2007, 10:04
Ghirik, ух ты в самом деле работает  smile . Это ж надо такое.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)