Marson,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td input {
width: 70px;
background-color: #EEE8AA;
}
</style>
</head>
<body>
<div id="show"></div>
<script>
var arr = [
[1, 2],
[3, 4]
];
function tableEditor(idDiv, arr) {
var div = document.createElement("div");
div.setAttribute("id", idDiv);
var table = document.createElement("table");
table.setAttribute("border", "1");
div.appendChild(table);
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j = 0; j < arr[i].length; j++) {
var td = document.createElement("td");
td.innerHTML = arr[i][j];
td.dataset.i = i;
td.dataset.j = j;
tr.appendChild(td)
}
}
var input = document.createElement("input");
input.setAttribute("type", "text");
table.addEventListener("dblclick", function(event) {
if (td = input.parentNode) {
td.removeChild(input);
i = td.dataset.i;
j = td.dataset.j;
td.textContent = arr[i][j] = +input.value;
show.innerHTML = JSON.stringify(arr, null, 4)
}
if (event.target.tagName == "TD") {
if (td != event.target) td = event.target;
input.value = td.textContent;
td.textContent = "";
td.appendChild(input)
}
});
return div
}
document.body.appendChild(tableEditor("container", arr));
</script>
</body>
</html>