Добавление новых рядов и колонок в таблицу при нажатии кнопки

166

30 декабря 2018, 12:20

По нажатию на кнопку добавляется каждый раз только 1 соответствующий элемент. А надо, чтобы каждый раз добавлялся новый элемент с сохранением вложенности. То есть, при нажатии 1 раз на Add row создаётся 1 ряд, потом 2 раза нажимаю Add col и создаются 2 колонки в ЭТОМ ЖЕ ряду. Потом нажимаю снова Add row - и создаётся новый ряд и т.д.

let table = document.getElementsByTagName('table')[0]; 
 
let row = document.createElement('tr'); 
let col = document.createElement('td'); 
 
 
function addRow(){ 
  row.innerHTML = 'Row'; 
  table.appendChild(row); 
} 
function addCol(){ 
  col.innerHTML = 'Column'; 
  table.appendChild(col); 
}

table { 
  width: 250px; 
  height: 250px; 
  outline: 1px solid black; 
  margin-top: 25px; 
} 
table tr { 
  width: 10px; 
  height: 10px; 
  outline: 1px dotted red; 
} 
 
table td { 
  width: 10px; 
  height: 10px; 
  outline: 1px solid green; 
}

<button onclick="addRow()">Add row</button> 
<button onclick="addCol()">Add cell</button> 
<table> 
 
</table>

Answer 1

let table = document.getElementsByTagName('table')[0]; 
 
let row; 
 
function addRow() { 
  row = document.createElement('tr'); 
  table.appendChild(row); 
} 
 
function addCol() { 
  if (!row) { 
    return row; 
  } 
  let col = document.createElement('td'); 
  col.innerHTML = 'Column'; 
  row.appendChild(col); 
}

table { 
  width: 250px; 
  height: 250px; 
  outline: 1px solid black; 
  margin-top: 25px; 
} 
 
table tr { 
  width: 10px; 
  height: 10px; 
  outline: 1px dotted red; 
} 
 
table td { 
  width: 10px; 
  height: 10px; 
  outline: 1px solid green; 
}

<button onclick="addRow()">Add row</button> 
<button onclick="addCol()">Add cell</button> 
<table> 
 
</table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как заставить nuxt@auth и nuxt-i18n подружиться

В приложении используется модуль nuxt@auth с требованием авторизации ко всем страницамРешили добавить nuxt-i18n

177

javascript

как создать html шаблон в angular?

Есть код

206

javascript

Вывод данных с сата в google spreadsheets

как сделать чтоб выводились данные с api только если они есть, если нет чтоб ставился 0, для гугл докс, вот кусок кода

172

javascript

как переключить слик слайдер при клике на блок c номером слайда?

![two muppets][1]

193