visibility by boolean && object output by classname as key

static/index.html

@@ -24,16 +24,26 @@
             </select>
         </p>
         <input type='checkbox' id='check1'><br/>
-        <div id="checkContainer">
-            <input type='checkbox'>
-        </div>
         <table>
-            <tr>
-                <td></td>
-            </tr>
-            <tr style='background-color: gray;'>
-                <td></td>
-            </tr>
+            <tbody id="numberTable">
+                <tr>
+                    <td>table template line 1</td>
+                </tr>
+                <tr style='background-color: gray;'>
+                    <td>table template line 2</td>
+                </tr>
+            </tbody>
+        </table>
+        <table>
+            <tbody id="hashTable">
+                <tr>
+                    <td class='age'></td>
+                    <td>asdfad</td>
+                    <td class='surname'></td>
+                    <td>zzzzZZZ</td>
+                    <td class='name'></td>
+                </tr>
+            </tbody>
         </table>
         <strong>Use $s variable for accessing data in DOM</strong>
         <pre id='state' style='background-color: lightgray;'>

static/index.js

@@ -1,7 +1,7 @@
 function nbInit($s){
     function nBind(callback, prop){
         for (var selector in $s){
-            selector = prop || selector;
+            selector = prop || selector; //change selector to passed if it
 
             var items = document.querySelectorAll(selector);
             items     = items.length ? items : [document.getElementById(selector)]; 
@@ -10,7 +10,7 @@ function nbInit($s){
                 callback(item, $s, selector)
             }
 
-            if (prop) return; 
+            if (prop) return;  //exit if selector passed, no iteration
         }
     }
 
@@ -18,25 +18,54 @@ function nbInit($s){
         nBind(function (item, $s, selector, value, key){
             value = typeof value === 'undefined' ? $s[selector] : value;
             var keyExists = typeof key !== 'undefined';
-            if (keyExists){
+            if (keyExists && "value" in item){ //if hash key-value pair. Usable for select > option
                 item.value = key;
             }
-            if (item.type === 'radio' && !keyExists){
-                if (item.value === value){
+            if (typeof value === "boolean" && item.type !== 'checkbox'){ //boolean means visibility, except checkbox
+                if (value){
+                    item.style.display = "originalDisplay" in item ? item.originalDisplay : "";
+                }
+                else {
+                    item.originalDisplay = item.style.display;
+                    item.style.display   = "none";
+                }
+                return;
+            }
+            if (item.type === 'radio' && !keyExists){ //radiogroup set
+                if (item.value === value){ //only item with right value to set
                     item.checked = true;
                 }
                 return;
             }
-            if (item.type === 'checkbox' && !keyExists){
+            if (item.type === 'checkbox' && !keyExists){ //checkbox setting by boolean
                 item.checked = !!value;
                 return;
             }
-            if (item.children.length && typeof value === "object"){
-                var originalChildren = Array.prototype.slice.call(item.children);
+            if (item.children.length && typeof value === "object"){ //recursive fill
+                item.copy = item.copy || item.cloneNode(true); //original node
+                var originalChildren = item.copy.children;
                 var i = 0;
-                var isArray = Array.isArray(value);
-                item.innerHTML = "";
-                for (var key in value){
+                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++){
+                                arguments.callee(classSubnodes[i], $s, selector, value[key]); // recursively fill subnode with that data. No reason to pass a key, because key are class selector, not value for option
+                            }
+                        }
+                        return;
+                    }
+                }
+                item.innerHTML = "";                     //remove sub nodes
+                for (var key in value){ //otherwise iterate over array or object
                     var newNode = originalChildren[i].cloneNode(true);
                     item.appendChild(newNode);
                     if (isArray){
@@ -49,11 +78,11 @@ function nbInit($s){
                 }
                 return;
             }
-            if (!keyExists){
+            if (!keyExists){ //default logic: set text or value to data value
                 item["value" in item ? "value" : "innerText"] = value;
             }
             else {
-                item.innerText = value;
+                item.innerText = value; // do not try to overwrite value on option nodes
             }
         },prop);
     }
@@ -95,6 +124,7 @@ function nbInit($s){
 }
 
 var $s;
+
 setTimeout(function(){
     $s = nbInit({
     text1: "txt",
@@ -103,10 +133,20 @@ setTimeout(function(){
              M:  "Male",
              F:  "Female",
              X:  "Xenomorph"},
-    tbody: [[1,2,3,4,5,6],
-            [7,8,9,10,11,12],
-            [13,14,15,16,17,18],
-            [19,20,21,22,23,24]] });
+    numberTable: [[1,2,3,4,5,6],
+                    [7,8,9,10,11,12],
+                    [13,14,15,16,17,18],
+                    /*[19,20,21,22,23,24]*/],
+    hashTable: [{ name: "Ivan",
+                  surname: "Ivanovv",
+                  age: "57"},
+                { name: "Petr",
+                  surname: "Petroff",
+                  age: "17"},
+                { name: "Mary",
+                  surname: "Tester",
+                  age: "27"} ]});
+
     $s.textarea; $s.select; $s.dzen; $s.check1; //just for init
 
     document.onchange();