En el ejemplo muestra como se carga el [**jstree**][1] correctamente, este plugin tiene una [**extensión de tabla**][2], en ella cargo unos elementos (`input` y `select`); el problema es que al intentar entrar a cualquiera de los elementos para indicar el valor, el elemento pierde el foco. <!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-js --> var data; data = [{ text: "Products", data: {}, children: [{ text: "Fruit", data: {}, children:[ {text: "Apple", data: {price: 0.1, quantity: 20}}, {text: "Banana", data: {price: 0.2, quantity: 31}}, {text: "Grapes", data: {price: 1.99, quantity: 34}}, {text: "Mango", data: {price: 0.5, quantity: 8}}, {text: "Melon", data: {price: 0.8, quantity: 4}}, {text: "Pear", data: {price: 0.1, quantity: 30}}, {text: "Strawberry", data: {price: 0.15, quantity: 32}} ], 'state': {'opened': true} }, { text: "Vegetables", data: {}, children:[ {text: "Aubergine", data: {price: 0.5, quantity: 8}}, {text: "Broccoli", data: {price: 0.4, quantity: 22}}, {text: "Carrot", data: {price: 0.1, quantity: 32}}, {text: "Cauliflower", data: {price: 0.45, quantity: 18}}, {text: "Potato", data: {price: 0.2, quantity: 38}} ] }], 'state': {'opened': true} }]; // load jstree $("div#jstree").jstree({ plugins: ["table","sort"], core: { data: data }, // configure tree table table: { columns: [ {header: "Nombres"}, {width: 250, header: "Tiempos", format: function(v) { let div_partes = $('<div/>',{ 'class' : 'col-sm-12 col-xs-12', }); div_field = $('<div/>',{ 'class' : 'col-sm-6 col-xs-6', }); let field_cant = $('<input/>',{ 'type' : 'number', 'id' : v, 'name' : 'planes', 'tipo' : 'cant', 'step' : '1', 'pattern' : '[0-9]+([\,][0-9]+)?', 'min' : '0', 'style' : 'width: 50px;', }); field_cant.appendTo(div_field); let field_tipo = $('<select/>',{ 'id' : v, 'name' : 'planes', 'style' : 'width: 50px;', }); let options; options = $('<option/>',{ 'value' : null, 'text' : 'Elija...', }); options.appendTo(field_tipo); options = $('<option/>',{ 'value' : 0, 'text' : 'Hora(s)', }); options.appendTo(field_tipo); options = $('<option/>',{ 'value' : 1, 'text' : 'Día(s)', }); options.appendTo(field_tipo); options = $('<option/>',{ 'value' : 2, 'text' : 'Mes(es)', }); options.appendTo(field_tipo); options = $('<option/>',{ 'value' : 3, 'text' : 'Año(s)', }); options.appendTo(field_tipo); field_tipo.appendTo(div_field); div_field.appendTo(div_partes); return div_partes; } }, ], resizable: true, height: 300 } }).on('loaded.jstree', function() { $('#jstree >ul > li').each( function() { disable( this.id ); }) function disable(node_id) { let node = $("#jstree").jstree().get_node( node_id ); $("#jstree").jstree().disable_node(node); node.children.forEach( function(child_id) { disable( child_id ); }) } }); <!-- language: lang-css --> @import url('http://getbootstrap.com/dist/css/bootstrap.css'); body { margin: 1em; } .jstree-table-wrapper:hover { color: #000; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script> <link href="https://static.jstree.com/3.3.0/assets/dist/themes/default/style.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://rawgit.com/adamjimenez/jstree-table/master/jstreetable.js"></script> <div id="jstree"></div> <!-- end snippet --> [1]: http://www.jstree.com/ [2]: https://github.com/adamjimenez/jstree-table/