nanobind/static/index.js

var $s, $show, basicKeys = ["text1", "textarea", "menu","select", "check1", "someInput", "numberTable", "hashTable", "checks", "radios", "ediTable"];
var persons = [{ name: "Ivan",
                  surname: "Ivanovv",
                  age: "57",
                  note: {value: "Buhaet", name: 'ivanovvsTextArea'},
                  married: true},
                { name: "Petr",
                  surname: "Petroff",
                  age: "17",
                  note: "Tyolki v golove",
                  married: false,
                  },
                { name: "Mary",
                  surname: "Tester",
                  married: true,
                  note: "Ovulyashka",
                  age: "27"} ];

setTimeout(function(){
    $s = nbInit({
    text1: "txt",
    textarea: "txt area",
//    p1: "para",
    //menu: {0: "Main", 1: "About Us"},
    menu: ["Main", "About Us", 'yep'],
    select: {"": "--",
             M:  "Male",
             F:  "Female",
             X:  "Xenomorph"},
    check1: true,
    someInput: {type: "number", placeholder: "percents", max: "100", min: "0", value: 50},
    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: persons,
    checks: [
            {check: {name: "first", checked: true},
             description: "first check"},
            {check: {name: "second", checked: false},
             description: "second check"},
            {check: {name: "third", checked: true},
             description: "third check"},
    ],
    radios: [
            {radio: {name: "sexism", value: "M"},
             description: "Male"},
            {radio: {name: "sexism", value: "F", checked: true},
             description: "Female"},
            {radio: {name: "racism", value: "white", checked: true},
             description: "White"},
            {radio: {name: "racism", value: "black"},
             description: "Black"}, ],
    });

//    $s.textarea; $s.select; $s.dzen; $s.check1; $s.note; $s.married; //just for init
    function btnDel(){
        var thisLine = this.parentElement.parentElement;
        thisLine.remove();
        $s["#hashTable tr:first-child button"] = false; //turn off first button of deletion
    };
    $s.btnDel = {onclick: btnDel};

    $s.addPerson = {onclick: function(){
        var newLine = document.getElementById('hashTable').copy.children[0].cloneNode(true);
        newLine.nbData = Object.assign({},persons[0]);
        document.getElementById('hashTable').appendChild(newLine);
        $s.btnDel = {onclick: btnDel};
    }}

    var ediNumbers = [];
    function ediFunc(){
        if ($s.ediInput){
            this.innerHTML = $s.ediInput;
        }
        else {
            var text = this.innerHTML;
            this.innerHTML = "<input id='ediInput'/>";
            $s.ediInput    = text;
        }
    }
    for (var i=0;i<10;i++){
        ediNumbers[i] = [];
        for (var j=0;j<10;j++){
            //ediNumbers[i][j] = [i*j]; //one-level lower trick; uncomment input in html
            //ediNumbers[i][j] = i*j; //read only table
            ediNumbers[i][j] = {ondblclick: ediFunc,
                                innerHTML:   i*j, //read only table
                                }
        }
    }
    $s.ediTable = ediNumbers;

    $show = nbInit({});

    document.onchange();
},2000);

function onUpdate(){
    var key   = this.parentElement.getElementsByClassName("key")[0].innerHTML;
    var value = this.parentElement.getElementsByClassName("data")[0].value;
    eval(key + value);
}

document.onchange = function(evt){
    //$s.state  = "";
    //$s.state  = JSON.stringify($s, null, 4);
    //
    if (evt && evt.target.className == 'data'){
        return;
    }
    

    var data = [];
    for (var i=0,key=basicKeys[i];i<basicKeys.length;i++,key=basicKeys[i]){
        data.push({key: "$s." + key + " = ", data: JSON.stringify($s[key], null, 4), update: {onclick: onUpdate}});
    }
    $show.rightColumn = data;
}