Добавленные ячейки Javascript теряют стиль и размер форматирования - PullRequest
Новая
       23

Добавленные ячейки Javascript теряют стиль и размер форматирования

0 голосов
/ 09 марта 2011

У меня есть html-таблица, которая добавляется функцией javascript, когда <body onLoad="appendTable('alphabetTable')"> Проблема в том, что добавленные ячейки, кажется, отсоединяются от остальной части таблицы, теряя размер ячейки, который они должны наследовать от <th> в области <thead> и опускании границы.

Смотрите это в действии здесь: http://jsfiddle.net/48X5M/

HTML: 

<html>
<head>
<title>Alphabet Table</title>
<script language="javascript" type="text/javascript" src="js/table.js"></script>
<style type="text/css">
#alphabetTable {border:1px solid black;}
</style>
</head>
<body onLoad="appendTable('alphabetTable')">
<h1>Alphabet Table</h1>

<table id="alphabetTable">
<thead>
    <tr>
        <td>Header1</td>
        <td>Header2</td>
        <td>Header2</td>
        <td>Header2</td>
    </tr>
</thead>
<tbody>
</tbody>
</table>


</body>
</html>

JS: 

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
    var i = 0;
    for (var r = 0; r < 4; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.appendChild(document.createTextNode(alphabet[i++]));
        }
    }

    document.body.appendChild(tbody);
}

Ячейки начинают добавляться к тегу tbody. Должен ли я назначать стили в JavaScript? Если да, то есть ли способ избежать этого ради простоты?

1 Ответ

3 голосов
/ 09 марта 2011

Вы добавляете tbody в конец страницы вместо того, чтобы добавлять его к таблице. Удаление строки document.body.appendChild(tbody); устраняет проблему. http://jsfiddle.net/Lajgn/

Ваш код в конечном итоге выглядит следующим образом (JS и CSS удалены для простоты): 

<body>
 <h1>Alphabet Table</h1>

 <table id="alphabetTable">
 <thead>
     <tr>
         <td>Header1</td>
         <td>Header2</td>
         <td>Header2</td>
         <td>Header2</td>
     </tr>
 </thead>

 </table>


 <tbody>
 <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td><td>g</td><td>h</td></tr><tr><td>i</td><td>j</td><td>k</td><td>l</td></tr><tr><td>m</td><td>n</td><td>o</td><td>p</td></tr></tbody>
</body>

Как видите, тело заканчивается за пределами таблицы и завершается с использованием стандартного форматирования.

...