data read

static/index.html

@@ -51,6 +51,7 @@
                     <td class='surname'></td>
                     <td class='name'></td>
                     <td><textarea class='note'></textarea></td>
+                    <td><button class='btn'>+</button></td>
                 </tr>
             </tbody>
         </table>

static/index.js

@@ -15,7 +15,7 @@ setTimeout(function(){
     hashTable: [{ name: "Ivan",
                   surname: "Ivanovv",
                   age: "57",
-                  note: {innerText: "Buhaet", name: 'ivanovvsTextArea'},
+                  note: {value: "Buhaet", name: 'ivanovvsTextArea'},
                   married: true},
                 { name: "Petr",
                   surname: "Petroff",
@@ -44,10 +44,17 @@ setTimeout(function(){
             {radio: {name: "racism", value: "white", checked: true},
              description: "White"},
             {radio: {name: "racism", value: "black"},
-             description: "Black"}, ]
+             description: "Black"}, ],
     });
 
     $s.textarea; $s.select; $s.dzen; $s.check1; $s.note; $s.married; //just for init
+    $s.btn = {onclick: function(){
+        var thisLine = this.parentElement.parentElement;
+        var newLine = thisLine.cloneNode(true);
+        newLine.nbData = Object.assign({},thisLine.nbData);
+        thisLine.parentElement.insertBefore(newLine,thisLine);
+        $s.btn = {onclick: arguments.callee};
+    }};
 
     document.onchange();
 },2000);

static/nb.js

@@ -36,6 +36,7 @@ function nbInit($s){
                 for (var key in value){
                     item[key] = value[key];
                 }
+                item.nbData = value;
                 return;
             }
             if (keyExists && "value" in item){ //if hash key-value pair. Usable for select > option
@@ -63,6 +64,7 @@ function nbInit($s){
             }
             if (item.children.length && typeof value === "object"){ //recursive fill
                 item.copy = item.copy || item.cloneNode(true); //original node
+                item.nbData = value;
                 var originalChildren = item.copy.children;
                 var i = 0;
                 var isArray = Array.isArray(value);      //different logic for array and objects
@@ -117,7 +119,52 @@ function nbInit($s){
             if (item.type === 'checkbox'){
                 return item.checked;
             }
-            return item["value" in item ? "value" : "innerText"]; 
+            if (item.tagName === 'SELECT'){
+                return item.value;
+            }
+            if ("nbData" in item){
+                var value = item.nbData;
+                if (!item.children.length && !Array.isArray(value) && typeof value === 'object'){ //hash array on single leaf node -> set attrs on the tag
+                    for (var key in value){
+                        value[key] = item[key];
+                    }
+                    return value;
+                }
+                if (item.children.length && typeof value === "object"){ //recursive fill
+                    var isArray = Array.isArray(value);      //different logic for array and objects
+                    if (!isArray){ // if first key in array find as class name in one of subnodes
+                        var classFound = false;
+                        for (var key in value){
+                            if (item.getElementsByClassName(key).length){
+                                classFound = true;
+                                break;
+                            }
+                        }
+                        if (classFound){
+                            for (var key in value){
+                                var classSubnodes = item.getElementsByClassName(key);
+                                for (var i=0;i<classSubnodes.length;i++){
+                                    value[key] = arguments.callee(classSubnodes[i], $s, selector); // recursively fill subnode with that data. No reason to pass a key, because key are class selector, not value for option
+                                }
+                            }
+                            return value;
+                        }
+                    }
+                    for (var key=0;key<item.children.length;key++){ //otherwise iterate over array or object
+                        if (isArray){
+                            value[key] = arguments.callee(item.children[key], $s, selector);
+                        }
+                        else {
+                            value[item.children[key].value] = arguments.callee(item.children[key], $s, selector);
+                        }
+                    }
+                    return value;
+                }
+            }
+            if ("value" in item){
+                return item.value;
+            }
+            return item.innerText; 
         },prop, "read");
     }