0

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

var html = '<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>',
  td = document.querySelector("td");
// document.querySelector('td').onclick = function() {
//   this.style.background = "black";

// };

for (var i = 0; i < td.length; i++) {

  td[i].onclick = function() {
    this.style.background = "black";

  };
}

document.querySelector('#but').onclick = function() {
  document.querySelector('#new-table').innerHTML = html;

};
td {
  padding: 25px;
  background: red;
  cursor: pointer;
}
#new-table td {
  background: green;
}
<button id="but">Создать новую табл</button>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<div id="new-table"></div>

1 ответ 1

1

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

var html = '<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>';

function addHandlers(table) {
  var tds = table.querySelectorAll("td");
  for (var i = 0; i < tds.length; i++) {

    tds[i].onclick = function() {
      this.style.background = "black";

    };
  }
}

addHandlers(document.querySelector('table'));

document.querySelector('#but').onclick = function() {
  var table = document.querySelector('#new-table')
  table.innerHTML = html;
  addHandlers(table);

};
td {
  padding: 25px;
  background: red;
  cursor: pointer;
}
#new-table td {
  background: green;
}
<button id="but">Создать новую табл</button>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<div id="new-table"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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