add editable html row with javascript and HTML only-CodePudding

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?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

<body>
    <div id="wrapper">
        <button id="addRow"> </button>
        <button id="deleteRow">-</button>
        <table id="table">
            <tbody>
                <!-- filled by script -->
            </tbody>
        </table>
    </div>

    <script>
        // add row
        document.getElementById("addRow").addEventListener("mouseup", function() {
        
            var table = document.getElementById("table")
            var row = table.insertRow(0);
            var cell0 = row.insertCell(0);
            var cell1 = row.insertCell(1);

            cell0.innerHTML = '<td contenteditable="true">Property</td>';
            cell1.innerHTML = '<td contenteditable="true">Value</td>'
        })
    </script>
</body>
</html>

CodePudding user response：

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

Change those inner <td> elements to something like a <div> instead:

cell0.innerHTML = '<div contenteditable="true">Property</div>';
cell1.innerHTML = '<div contenteditable="true">Value</div>'

CodePudding user response：

As others noted the cells variables are <td> 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;
}

<div id="wrapper">
  <button id="addRow"> </button>
  <button id="deleteRow">-</button>
  <table id="table">
    <tbody>
      <!-- filled by script -->
    </tbody>
  </table>
</div>

CodePudding user response：

cell0 and cell1 are basically <td> elements itself, so there is no need to set innerHTML with contenteditable on them. You can directly set the contentEditable property of the the elements to true.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

<body>
    <div id="wrapper">
        <button id="addRow"> </button>
        <button id="deleteRow">-</button>
        <table id="table">
            <tbody>
                <!-- filled by script -->
            </tbody>
        </table>
    </div>

    <script>
        // add row
        document.getElementById("addRow").addEventListener("mouseup", function() {
        
            var table = document.getElementById("table")
            var row = table.insertRow(0);
            var cell0 = row.insertCell(0);
            var cell1 = row.insertCell(1);
            
            cell0.innerHTML = "property";
            cell1.innerHTML = "value";

            [cell0, cell1].forEach(c=>c.contentEditable = true);
        })
    </script>
</body>
</html>