Changing the innerhtml after cloneNode not working

Question

I have a table that has some 50 rows. The last cell of each row is an image, clicking on which I show textboxes in each cell on that particular row, so user can edit the values. For this, I have written a Javascript on click of the image, I will go over that particular row and change the innerHTML of each td to have a textbox.

function insertEdittableRow(ids){  
     var row = $(ids).closest("tr");

     var tdvar = row.find('td[class=mainServer]')[0];

      var servname = tdvar.innerHTML.trim();

      tdvar.innerHTML = "'<'INPUT id=updServerName class=TextBoxStyle value='" + servname 
                +"' type=text name=updServerName/> ";

    }

This works fine. Second step I wanted to do was sorting.

On click of the table's header, I am sorting the table. And the sort javascript goes like this. It takes up all rows, put that in an array with the old index (the rownumber) and do a sort. Then it loops over the array and create a new sorted tbody. The old unsorted tbody of the table will replaced with this new sorted one.

    for(var i=0, len=arrayOfRows.length; i'<'len; i++) {
       newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
    }

    table.replaceChild(newTableBody,tbody);

This also works fine.

But the problem is, now, on click of the image button in last cell as described in the first part is not working. I put debugger in that javascript function and it hits there and forms the text and assigns to the innerHTML of the last td, but in page I don't see the textbox.

In summary, the textbox is inserted as innerHTML before sorting, but after I do sorting with cloneNode, created a new sorted tBODY and inserted into the table, the innerHTML assigning is not working.

Any help is appreciated.

Answer 1

As a work around, i stopped doing cloneNode while sorting. Instead i did createElement and appendChild for each cell of the row and appendChild the row to the tbody