Question

Consider:

  $( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
     var q = $( this ).html();
     $( this ).html( "<input type='number' style='text-align:right width:50px' min='1' value='" + q + "'/>" );
  }).mouseleave( function() { 
     var q = $( this ).find( "input" ).val();
     $( this ).html( q );
  });

Whenever the user hovers over a cell in the third column of my table, the content is replaced with an input element. Works like a charm.

The problem is that the inline styling for this element is not properly applied. E.g. the text in the box for example aligns left – the default. Also the width is not set.

I read in an earlier question that dynamically created input elements need to be refreshed when created:

Styles not getting applied properly in dynamically created radio buttons

So I tried adding this:

     $( this ).find( "input" ).textinput( 'refresh' );

And or this:

     $( this ).find( "input" ).textinput();

But neither of those works. My target platform is the latest chrome.

Am I not refreshing input correctly? Or is there some other problem?

Answer 1

You’ve missed a semicolon between text-align and width in the inline style…

$( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
    var q = $( this ).html();
    $( this ).html( "<input type='number' style='text-align:right;width:50px' min='1' value='" + q + "'/>" );
}).mouseleave( function() { 
    var q = $( this ).find( "input" ).val();
    $( this ).html( q );
});

I just tried a before & after in jsfiddle and that’s all that was wrong with it 🙂