Вставить значение в определенную ячейку определенной строки

Question

Подскажите, как вставить значение в определенную ячейку в нужной строке через js есть таблица вида

<table>
 <tr id="1">
  <td id="1"></td>
  <td id="2"></td>
  <td id="3"></td>
 </tr>
 <tr id="2">
  <td id="1"></td>
  <td id="2"></td>
  <td id="3"></td>
 </tr>

Так вот, надо вставить значение в ячейку через id строки и ячейки в которую вставлять надо.

Пытался разными способоами, но ничего не выходит

Answer 1

В вашем HTML ошибка. id не могут быть одинаковые по определению. «The id global attribute defines an identifier (ID) which must be unique in the whole document.» Исправьте это, и после этого сможете искать элементы по id.

Чтобы найти элемент по его id, используйте document.getElementById().

А чтобы поменять значение внутри элемента, можете использовать property innerHTML.

И так получаем:

document.getElementById('2_1').innerHTML = 'artes';

Answer 2

Как уже написали в комментариях id html элементов должны быть уникальными. Поэтому я предлагаю вот такое решение без использования дублированных id

replaceCellContent(1, 1, 'content 1 1')
replaceCellContent(1, 2, 'content 1 2')
replaceCellContent(1, 3, 'content 1 3')

replaceCellContent(2, 1, 'content 2 1')
replaceCellContent(2, 2, 'content 2 2')
replaceCellContent(2, 3, 'content 2 3')

function replaceCellContent(rowNumber, cellNumber, content) {
  const selector = `#app-table tr:nth-of-type(${rowNumber}) > td:nth-of-type(${cellNumber})`
  const cellElement = document.querySelector(selector);
  if (cellElement) {
    cellElement.textContent = content;
  }
}

<table id="app-table">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
<table>

Answer 3

var td_date = document.getElementById(date_event_from).children;
    for(var j=0, child; child=td_date[j]; j++) {
        if(child.dataset.id == event_id){
            child.innerHTML = text_event;
        }
                                        
    }

event_id - переменная которая равна td id и data-id. date_event_from - переменная которая равна tr id. получили всех потомков в строке. дальше перебираем их через цикл. Делаем проверку, что если data id равен переменной, то заносим значение в этого потомка в нужной строке

БЛОГ НА HUSL

Вставить значение в определенную ячейку определенной строки

Ответы (3 шт):