Как добавить класс к элементам (JS)

10 февраля 2022, 06:20

У меня дана таблица и ссылка, при нажатии на ссылку к таблице добавляется строка. Как к добавляющимся элементам дать класс?

<script type="text/javascript"> 
function addRow(id){ 
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0]; 
    var row = document.createElement("TR") 
    var td1 = document.createElement("TD") 
    td1.appendChild(document.createTextNode("column 1")) 
    var td2 = document.createElement("TD") 
    td2.appendChild (document.createTextNode("column 2")) 
    row.appendChild(td1); 
    row.appendChild(td2); 
    tbody.appendChild(row); 
  } 
</script> 
 
<center> 
<p>Скрипт добавляет строку в таблицу, после нажатия на ссылку.</p> 
 
<a href="javascript://" onclick="addRow('myTable');return false;">Добавить строку</a> 
<table id="myTable" cellspacing="0" border="1"> 
  <tbody> 
    <tr> 
      <td>row1_column1</td><td>row1_column1</td> 
    </tr> 
  </tbody> 
</table>

Answer 1

Вообще, td1.className = "my_class-1"; td2.className = "my_class-2";
Но если HTML сложноватый нет смысла, так заморачиваться с созданием элементов.

function addRow(id) { 
  var tbody = document.querySelector('#' + id + ' tbody'); 
  var rows = tbody.querySelectorAll('tr'); 
  
  tbody.insertAdjacentHTML('beforeend', ` 
    <tr> 
      <td class="red">row${ rows.length + 1 }_column1</td> 
      <td class="green">row${ rows.length + 1 }_column2</td> 
    </tr> 
  `); 
}

.red { color: red; } 
.green { color: green; } 
 
td { padding: 4px; }

<a href="javascript://" onclick="addRow('myTable');">Добавить строку</a> 
<hr> 
<table id="myTable" cellspacing="0" border="1"> 
  <tbody> 
    <tr> 
      <td>row1_column1</td> 
      <td>row1_column2</td> 
    </tr> 
  </tbody> 
</table>

А если есть много работы со вставкой HTML и очень хочется самому создавать элементы, есть смысл написать функцию под конкретную задачу:

function addRow(id) { 
  var tbody = document.querySelector('#' + id + ' tbody'); 
  var newRow = tbody.querySelectorAll('tr').length + 1; 
  
  var tr = create('tr'); 
   
  tr.append( 
    create('td', `row${newRow}_column1`, 'red'), 
    create('td', `row${newRow}_column2`, 'green'),     
  ); 
   
  tbody.appendChild(tr); 
} 
 
function create(tag, text, className){ 
  var elem = document.createElement(tag); 
   
  elem.textContent = text || ""; 
  if( className ) elem.className = className; 
   
  return elem; 
}

.red { color: red; } 
.green { color: green; } 
 
td { padding: 4px; }

<a href="javascript://" onclick="addRow('myTable');">Добавить строку</a> 
<hr> 
<table id="myTable" cellspacing="0" border="1"> 
  <tbody> 
    <tr> 
      <td>row1_column1</td> 
      <td>row1_column2</td> 
    </tr> 
  </tbody> 
</table>

Answer 2

Добавлять ничего не нужно, для этого есть специальный метод cloneNode.
element.cloneNode(true) скопирует все дерево элемента вместе с атрибутами/классами.

const cloneRow = (() => { 
 
  // Сразу создаем строку и устанавливаем все необходимые классы/атрибуты 
  let tr = document.createElement('tr') 
  let cell = document.createElement('td') 
  for (let i = 0; i < document.querySelector('#myTable > thead > tr').childElementCount; ++i) { 
    tr.appendChild(cell.cloneNode(true)) 
  } 
  // куда необходимо сразу и устанавливаем класс/атрибут 
  // ну и например так 
  tr.firstElementChild.className = 'firstCell' 
 
  // получаем функцию создания/клонирования строки 
  return (...content) => { 
    let row = tr.cloneNode(true) 
    let cnt = content.slice() 
    Array.prototype.forEach.call(row.children, (e) => e.textContent = cnt.shift()) 
    return row 
  } 
 
})() 
 
 
const addRow = (() => { 
  const tbody = document.querySelector('#myTable > tbody') 
 
  // Это уже баловство но надо же что-то вставить 
  var char = 'a' 
  const getCode = () => { 
    let code = char.codePointAt(0) 
    char = String.fromCodePoint(++code) 
    return code; 
  } 
 
  return () => tbody.appendChild(cloneRow(`Символ ${char}`, `Код ${getCode()}`)) 
})() 
 
document.querySelector('button').addEventListener('click', addRow)

.firstCell { 
  background-color: #607D8B; 
  color: #fff; 
}

<button>Вставить строку</button> 
<table id="myTable" cellspacing="0" border="1"> 
  <thead> 
    <tr> 
      <th>Символ</th> 
      <th>Код</th> 
    </tr> 
  </thead> 
  <tbody> 
  </tbody> 
</table>