tableEditor.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // var table = document.createElement("table");
  2. // for (var i = 0; i < persons.length; i++) {
  3. // tr = document.createElement("tr");
  4. // var key = Object.keys(persons[i]);
  5. // for (var c = 0; c < key.length; c++) {
  6. // if(c < 3)
  7. // str += "<td>" + key[c] + ": " + persons[i][key[c]] + "</td>";
  8. // if(c >= 3 && key[c] in persons[i])
  9. // str += "<td>" + key[c] + ": " + persons[i][key[c]] + "</td>";
  10. // }
  11. // str += "</tr>"
  12. // }
  13. // str += "</table>";
  14. // document.write(str);
  15. var a = {
  16. name: "Ivan",
  17. surname: "Ivanov",
  18. }
  19. var b = {
  20. name: "Petr",
  21. surname: "Petrov",
  22. }
  23. var c = {
  24. name: "Alex",
  25. surname: "Sidarov",
  26. }
  27. a.age = 20;
  28. b.fathername = "Nikolai";
  29. c.sex = "male";
  30. var persons = [a,b,c,
  31. {
  32. name: "pasha",
  33. surname: "efimenko",
  34. age: 22
  35. }
  36. ]
  37. var element = document.createElement("div");
  38. document.body.appendChild(element);
  39. element.setAttribute("id","myId")
  40. var result = tableEditor(element, persons)
  41. console.log(result)
  42. function tableEditor(container, arr){
  43. function dblfunc(){
  44. var cont = document.createElement("input")
  45. cont.setAttribute("type","text");
  46. this.innerHTML = "";
  47. this.appendChild(cont);
  48. cont.ondblclick = inputDbl;
  49. }
  50. function inputDbl(){
  51. var val = this.value;
  52. var objKeyss = Object.keys(arr[this.parentElement.parentElement.rowIndex]);
  53. if(!(this.cellIndex % 2))
  54. arr[this.parentElement.parentElement.rowIndex][objKeyss[this.cellIndex/2]] = val;
  55. if(this.cellIndex % 2 > 0)
  56. arr[this.parentElement.parentElement.rowIndex][val] = this.nextSibling.innerHTML;
  57. this.parentElement.ondblclick = function(){};
  58. this.parentElement.innerHTML = arr[this.parentElement.parentElement.rowIndex][objKeyss[this.cellIndex/2]];
  59. console.log(arr);
  60. this.parentElement.removeChild(this);
  61. console.log(arr);
  62. }
  63. var table = document.createElement("table");
  64. for (var i = 0; i < arr.length; i++) {
  65. var tr = document.createElement("tr");
  66. for (var j = 0; j < 3; j++) {
  67. var td1 = document.createElement("td");
  68. var td2 = document.createElement("td");
  69. var objKeys = Object.keys(arr[i])
  70. td1.innerHTML = objKeys[j] + ": ";
  71. td2.innerHTML = arr[i][objKeys[j]];
  72. td1.ondblclick = dblfunc;
  73. td2.ondblclick = dblfunc;
  74. tr.appendChild(td1);
  75. tr.appendChild(td2);
  76. }
  77. table.appendChild(tr);
  78. }
  79. container.appendChild(table);
  80. return arr;
  81. }