0

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

<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>

2 ответа 2

1

Добавлять ничего не нужно, для этого есть специальный метод 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>

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.