How to convert html <table> to Handsontable which table has html input fields also -

I want to show a dynamic table that contains incoming record from custom search.

Now I want to make the table row as an inline editable line.

I also need endorsement with the table because I have 30 to 40 table columns, which I need to display on the same table (scroll for columns).

I used the handset to see it as below, however, the image is not coming as I have entered in the table cell.

  & lt ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = 'UTF-8' & gt; & Lt; Title & gt; Scroll - handset qualified & lt; / Title & gt; & Lt; Script Data- jsfiddle = "normal" src = "handsontable.full.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery-1.11.1.min.js" & gt; & Lt; / Script & gt; & Lt; Link data-jsfiddle = "mangal" rel = "stylesheet" media = "screen" href = "handsable. Full ccss" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "example1" style = "width: 700px; height: 400px; overflow: auto" & gt; & Lt; Table id = "example" class = "row-boundary hover command-column" cell field = "0" style = "display: none;" & Gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; Action & lt; / Th & gt; & Lt; Th & gt; Id & lt; / Th & gt; & Lt; Th & gt; Name & lt; / Th & gt; & Lt; Th & gt; Address & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td> & Lt; Img src = "edit.jpg" height = "20" width = "20" /> gt; & Lt; / Td> & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> & Lt; Img src = "edit.jpg" height = "20" width = "20" /> gt; & Lt; / Td> & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; Test2 & lt; / TD & gt; & Lt; TD & gt; Test2 & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> & Lt; Img src = "edit.jpg" height = "20" width = "20" /> gt; & Lt; / Td> & Lt; TD & gt; 3 & lt; / TD & gt; & Lt; TD & gt; Test3 & lt; / TD & gt; & Lt; TD & gt; Test3 & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; Script Data - jsfiddle = "example1" & gt; Var data = $ ('# example tr'). Map (function (tr) {return [$ (this) .children () Map (function (td) {return $ (this) .text ()}). ()]}}. Get () var example = document .getElementById ('example1'), max = document.query selector ('maximize'), maxed = false, resizeTimeout, availableWidth, availableHeight, hot1; hot1 = new handonable (e.g., {data: data, // colwidths: [55, 80, 80, 80, 80, 80, 80]), can also be a number or function line headers: incorrect, callhard: wrong, fixed column: valve: 2, fixed lights: 1, minimum space: 1 , Context menu: true}}; Calculate the function size () {var offset; If (max) {offset = handset qualified.domoff offset (example); Availablewind = hendonable.document.body - offset.left + window.scrollX; Availablehigh = hendentable Dimmerhighlight (document.bd) - offset.top + window. ScrollY; Example.style.width = availableWidth + 'px'; Example.style.height = availableHeight + 'px'; }} & Lt; / Script & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  
 
 By showing this, your definition of hand print is correct Sticking or what is the handstandable doing for you? I'm not sure whether you know or not, but you do not need to define the table in HTML to work for it. The fact of the matter is that you should not define it. 
 
 If this was just a render code, can you explain in detail about this, "I have used the handset to get it as below. Entered ". Which parts are wrong and what should you change?