// var table = document.createElement("table"); // for (var i = 0; i < persons.length; i++) { // tr = document.createElement("tr"); // var key = Object.keys(persons[i]); // for (var c = 0; c < key.length; c++) { // if(c < 3) // str += "" + key[c] + ": " + persons[i][key[c]] + ""; // if(c >= 3 && key[c] in persons[i]) // str += "" + key[c] + ": " + persons[i][key[c]] + ""; // } // str += "" // } // str += ""; // document.write(str); var a = { name: "Ivan", surname: "Ivanov", } var b = { name: "Petr", surname: "Petrov", } var c = { name: "Alex", surname: "Sidarov", } a.age = 20; b.fathername = "Nikolai"; c.sex = "male"; var persons = [a,b,c, { name: "pasha", surname: "efimenko", age: 22 } ] var element = document.createElement("div"); document.body.appendChild(element); element.setAttribute("id","myId") var result = tableEditor(element, persons) console.log(result) function tableEditor(container, arr){ function dblfunc(){ var cont = document.createElement("input") cont.setAttribute("type","text"); this.innerHTML = ""; this.appendChild(cont); cont.ondblclick = inputDbl; } function inputDbl(){ var val = this.value; var objKeyss = Object.keys(arr[this.parentElement.parentElement.rowIndex]); if(!(this.parentElement.cellIndex % 2)){ arr[this.parentElement.parentElement.rowIndex][val] = this.parentElement.nextSibling.innerHTML; if(this.parentElement.cellIndex === 0) delete(arr[this.parentElement.parentElement.rowIndex][objKeyss[this.parentElement.cellIndex]]); else delete(arr[this.parentElement.parentElement.rowIndex][objKeyss[this.parentElement.cellIndex - 1]]); } if(this.parentElement.cellIndex % 2 > 0) arr[this.parentElement.parentElement.rowIndex][objKeyss[(this.parentElement.cellIndex - 1)/2]] = val; this.parentElement.ondblclick = function(){}; this.parentElement.innerHTML = val; console.log(arr); this.parentElement.removeChild(this); console.log(arr); } var table = document.createElement("table"); for (var i = 0; i < arr.length; i++) { var tr = document.createElement("tr"); for (var j = 0; j < 3; j++) { var td1 = document.createElement("td"); var td2 = document.createElement("td"); var objKeys = Object.keys(arr[i]) td1.innerHTML = objKeys[j] + ": "; td2.innerHTML = arr[i][objKeys[j]]; td1.ondblclick = dblfunc; td2.ondblclick = dblfunc; tr.appendChild(td1); tr.appendChild(td2); } table.appendChild(tr); } container.appendChild(table); return arr; }