Полужирный текст в динамически создаваемой таблице - javascript

Я пытаюсь добавить полужирный текст в строку заголовка таблицы с помощью метода .bold () в javascript. Таблица создается динамически с использованием этого кода:

var table = document.getElementById('changestable');
    var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
    var newRow = table.insertRow(0);
    for (k = 0; k < titlerow.length; k++){
        var newCell = newRow.insertCell(k);
        var newText = document.createTextNode(titlerow[k]);
        newCell.appendChild(newText);
    }

Я пытался:

.bold() // and this just adds <b></b>, not actually making the text bold

Я также пробовал:

titlerow[k].style.fontWeight = 'bold'

Заранее спасибо!

javascript

27.05.2018 23:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 909

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не можете применить style к строке - вместо этого вы должны применить его к элементу.

newCell.style.fontWeight = 'bold';

Но вместо того, чтобы пытаться возиться с этим в Javascript, почему бы вместо этого не применить стиль в CSS? Отделяйте функциональность Javascript от стиля страницы

var table = document.getElementById('changestable');
var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
var newRow = table.insertRow(0);
for (k = 0; k < titlerow.length; k++){
  var newCell = newRow.insertCell(k);
  var newText = document.createTextNode(titlerow[k]);
  newCell.appendChild(newText);
}

#changestable tr:first-child {
  font-weight: bold;
}

<table id = "changestable"></table>

Или, что еще лучше, если возможно, вставьте th, а не td, и вам вообще не понадобится стилизация, поскольку th автоматически выделяются жирным шрифтом:

var table = document.getElementById('changestable');
var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
var newRow = table.insertRow(0);
titlerow.forEach(titleStr => {
  newRow.appendChild(document.createElement('th'))
    .textContent = titleStr;
});

<table id = "changestable"></table>

большое спасибо! Стили CSS - не моя сильная сторона.

— 27.05.2018 23:56

на самом деле вы поместили этот CSS в style.css или в функцию?

— 28.05.2018 00:01

Конечно, в CSS - синтаксис CSS внутри JS недействителен. Нажмите "Выполнить фрагмент кода".

— 28.05.2018 00:02

27.05.2018 23:55

Вы можете использовать innerHTML и добавить тег <b>

for (k = 0; k < titlerow.length; k++){
    var newCell = newRow.insertCell(k);
    var newText = document.createTextNode();
    newText.innerHTML = `<b> ${titlerow[k]} </b>`;
    newCell.appendChild(newText);
}

Это недопустимо, текстовые узлы не могут иметь такой стиль. (нет свойства style)

— 27.05.2018 23:57

27.05.2018 23:55