Добавление и удаление ячеек через JS

154

09 марта 2019, 09:50

Необходимо сделать скрипт который при нажатии на кнопку создаёт ячейку таблицы в низ, и при нажатии на другую кнопку создаёт ячейки таблицы в право. И ещё 2 кнопки которые так же удаляют ячейки. Удалось разобраться только в создании ячеек в низ. Буду рад любой подсказке. Заранее благодарен!

function addStr() { 
  var str = document.getElementById('tableResult'); 
  var add = str.insertRow(-1); 
  var addTr = document.createElement("tr"); 
  var addTd = document.createElement("td"); 
  addTd.innerHTML = "test"; 
  addTr.appendChild(addTd); 
  str.appendChild(addTr); 
} 
 
function deleteRow() { 
  var i = r.parentNode.parentNode.rowIndex; 
  document.getElementById("myTable").deleteRow(i); 
}

<button onclick="addStr()">Добавить ячейку в низ</button> 
<button onclick="addStr()">Добавить строку в право</button> 
<button onclick="addStr()">Удалить строку в лево</button> 
<button onclick="deleteRow()">Удалить ячейку на верх</button> 
<table id="tableResult" style="border:1px solid;"> 
  <tr> 
    <td> 
      test 
    </td> 
  </tr> 
</table>

Answer 1

var table = document.getElementById('tableResult'); 
var row; 
addRow(); 
 
function addRow() { 
  row = table.insertRow(); 
  addCol(); 
} 
 
function addCol() { 
  var col = document.createElement("td"); 
  col.innerHTML = "test"; 
  row.appendChild(col); 
} 
 
function deleteRow() { 
  table.deleteRow(table.rows.length - 1); 
  row = table.rows[table.rows.length - 1]; 
} 
 
function deleteCol() { 
  var cols = row.getElementsByTagName('td'); 
  if (cols.length > 1) { 
    row.removeChild(cols[cols.length - 1]); 
  } else { 
    deleteRow(); 
  } 
}

<button onclick="addRow()">Добавить ячейку в низ</button> 
<button onclick="addCol()">Добавить строку в право</button> 
<button onclick="deleteCol()">Удалить строку в лево</button> 
<button onclick="deleteRow()">Удалить ячейку на верх</button> 
<table id="tableResult" style="border:1px solid;"> 
  <tr> 
    <td> 
      test 
    </td> 
  </tr> 
</table>