add editable html row with javascript and HTML only

Question

The question itself was asked many times but I couldn´t find a similar example like I wrote. My request is simple, I want to add rows which are editable. To do so I created a plus button which adds a row. Unfortunately this row´s aren´t editable, even if the innerHTML is set to be able to.

Any idea without jquery?

user_328193 · Answer

The problem isn't contenteditable, the problem is that the code is trying to append a element immediately within a element. cell0 and cell1 already are elements. The browser is "correcting" the markup and removing the invalid inner , leaving you with just a table with text in it.

Change those inner elements to something like a

instead:

cell0.innerHTML = 'Property';
cell1.innerHTML = 'Value'

user_443523 · Answer

As others noted the cells variables are elements already. You can just set the contentEditable property to true.

Also I would change the mouseup event to a click event. The mouseup event is not triggered in keyboard inputs. However if you want to use the mouseup for some reason you can still do it.

document.getElementById("addRow").addEventListener("click", function() {

  var table = document.getElementById("table")
  var row = table.insertRow(0);

  var cell0 = row.insertCell(0);
  cell0.contentEditable = true;
  cell0.textContent = 'Property';

  var cell1 = row.insertCell(1);
  cell1.contentEditable = true;
  cell1.textContent = 'Value'
})

table,
th,
td {
  border: 1px solid black;
}

add editable html row with javascript and HTML only

2 Answers