Форум

IgorFomenko · #1 (**permalink**) 14.05.2020, 18:44

Здравствуйте, слишком долго ищу ответ на такой простой вопрос.
Создаю таблицу при помощи JS, хочу назначить стили не во время создания таблицы (с этим проблем нет td.style.border = '1px solid black' ), а хочу сделать это после. Итак, вопрос, как назначить всем ячейкам td заголовка th таблицы tbl style.border = '1px solid black' без банального перебора в цикле всех td принадлежащих th. Может есть пример с nth()?

laimas · #2 (**permalink**) 14.05.2020, 19:05

Сообщение от IgorFomenko

всем ячейкам td заголовка th таблицы

Это как понимать? Ячейки заголовка, это и есть th, вот и укажите в CSS стили для них.

IgorFomenko · #3 (**permalink**) 14.05.2020, 19:09

Я хочу хотя бы добиться рамки вокруг header так
th.style.border = '1px solid black'
но результат нулевой,
tbl.style.border = '2px solid black' работает

laimas · #4 (**permalink**) 14.05.2020, 19:13

А почему не?

table {
     border-collapse: collapse;
}

th {
     border: 1px solid #000;
     /* прочие стили */
}

IgorFomenko · #5 (**permalink**) 14.05.2020, 19:15

Я пишу функцию, которая создаст таблицу программно. И вся стилистика будет заложена внутри функции.

IgorFomenko · #6 (**permalink**) 14.05.2020, 19:18

Конечно я могу создать стиль программно, применить его к таблице, а потом даже удалить, но мне казалось, что можно обойтись без этого.

laimas · #7 (**permalink**) 14.05.2020, 19:27

<table style="border-collapse: separate;">
    <tr>
        <th style="border: 1px solid #f00;">11111</th>
    </tr>
    <tr>
        <td style="border: 1px solid #00f;">22222</td>
    </tr>
</table>

А если сказанное выше надо понимать как <tr тут прописать стили для ее ячеек>, то конечно нельзя.

PS. То есть, вы можете указать общий стиль для ячеек строки, но без явного указания стиля ячейки "наследовать от родителя" не получится.

<table style="border-collapse: separate;">    
    <tr style="border: 1px solid #f00;">
        <th>без бордюра</th>
        <th style="border: inherit;">с бордюром</th>
    </tr>
</table>

Если я правильно понял смысл вопроса.

IgorFomenko · #8 (**permalink**) 14.05.2020, 19:35

Вы предлагаете HTML вариант, а я пишу JS код!

function fromArrayOfObj(obj) {
    let tr, td, NR = obj.length, body = document.body
//table
    let tbl = document.createElement('table')
    tbl.id = 'table';
//caption
    let tcap = tbl.createCaption();
    tcap.innerHTML = "Сотрудники";
//header
    let th = tbl.createTHead();
    th.style.border = '1px solid black';
    tr = th.insertRow();
    for (var key in obj[0]) {
           td = tr.insertCell();
//         td.style.border = '1px solid black';
//         td.style.fontWeight = 'bold';
//         td.style["text-align"] = 'center';

        td.appendChild(document.createTextNode(key));
    }
//fill table
    for (var i = 0; i < NR; i++) {
        tr = tbl.insertRow();
        for (var key in obj[0]) {
            td = tr.insertCell();
            td.appendChild(document.createTextNode(obj[i][key]));
            td.style.border = '1px solid black';
        }
    }
//apply styles
//     tbl.style.border = '2px solid black';
//     tbl.style.borderCollapse = 'collapse';

    body.appendChild(tbl);
}

рони · #9 (**permalink**) 14.05.2020, 19:38

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

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег THEAD</title>
  <style type="text/css">
   td{
       height: 50px;
   }

  </style>
 </head>
 <body>

  <table style="width: 600px; border-collapse: collapse">
   <thead style="background: #fc0; box-sizing: border-box">
    <tr>
     <td style="border: 1px solid #000000; border-right: none"> ... </td>
     <td style="border: 1px solid #000000; border-right: none; border-left: none;"> ... </td>
     <td style="border: 1px solid #000000; border-left: none;"> ... </td>
    </tr>
   </thead>
   <tbody style="background: #ccc">
    <tr>
     <td> ... </td>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </tbody>
  </table>

 </body>
</html>

laimas · #10 (**permalink**) 14.05.2020, 19:41

Сообщение от IgorFomenko

Вы предлагаете HTML вариант, а я пишу JS код!

Стилями заведует иной движок, а не html и JS. Вы посредством JS только прописываете стили в атрибуте, а не "рисуете бордюры" на JS.

Форум

Справочник

Discord чат

Курсы javascript