ok

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css

@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
+}

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
+</html>

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js

@@ -1,32 +1,25 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-var editingTd;
+let editingTd;
 
 table.onclick = function(event) {
 
-  var target = event.target;
+  // 3 possible targets
+  let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
-  while (target != table) {
-    if (target.className == 'edit-cancel') {
-      finishTdEdit(editingTd.elem, false);
-      return;
-    }
+  if (!table.contains(target)) return;
 
-    if (target.className == 'edit-ok') {
-      finishTdEdit(editingTd.elem, true);
-      return;
-    }
+  if (target.className == 'edit-cancel') {
+    finishTdEdit(editingTd.elem, false);
+  } else if (target.className == 'edit-ok') {
+    finishTdEdit(editingTd.elem, true);
+  } else if (target.nodeName == 'TD') {
+    if (editingTd) return; // already editing
 
-    if (target.nodeName == 'TD') {
-      if (editingTd) return; // already editing
-
-      makeTdEditable(target);
-      return;
-    }
-
-    target = target.parentNode;
+    makeTdEditable(target);
   }
-}
+
+};
 
 function makeTdEditable(td) {
   editingTd = {
@@ -34,9 +27,9 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td, not textarea! the rest of rules will cascade
+  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
 
-  var textArea = document.createElement('textarea');
+  let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
   textArea.style.height = td.clientHeight + 'px';
   textArea.className = 'edit-area';
@@ -57,6 +50,6 @@ function finishTdEdit(td, isOk) {
   } else {
     td.innerHTML = editingTd.data;
   }
-  td.classList.remove('edit-td'); // remove edit class
+  td.classList.remove('edit-td'); 
   editingTd = null;
-}
+}