HTML表格单元格编辑文本框不注重工作不

Question

我有一个非常简单的表结构

<table width='50%' align='center' id='tabs'> 
    <tr> 
    <td>1.00</td> 
    <td>5.23</td> 
    <td>6.12</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>2.45</td> 
    <td>2.45</td> 
    </tr> 
    <tr> 
    <td>3.12</td> 
    <td>2.98</td> 
    <td>2.09</td> 
    </tr> 
</table> 

，在这里输入模糊事件是我的代码，只允许在用的TextInput点后的两个地方输入数字即它只允许像例如2.12数字和问题是如果我点击表格单元格中的文本框出现在该单元格中，我可以编辑数字，但是当我点击表格单元格时，它应该重点放在文本框和编辑数字后，当我来没有编辑该模糊事件应该工作。

$("table td").click(function(e){ 
    if($(this).find('input').length){ 
     return ; 
    }   
    var input = $("<input type='text' size='5' />").val($(this).text()); 
    $(this).empty().append(input); 
    $(this).find('input') 
    .focus(function(e){ 
     if($(this).val()=='0.00' || $(this).val()=='0'){$(this).val('');} 
    }).keydown(function(event){ 
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 190 || event.keyCode == 13 || 
       // Allow: Ctrl+A 
      (event.keyCode == 65 && event.ctrlKey === true) || 
      // Allow: home, end, left, right 
      (event.keyCode >= 35 && event.keyCode <= 39)) { 
      // let it happen, don't do anything 
      return; 
     } 
     else { 
      // Ensure that it is a number and stop the keypress 
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { 
       event.preventDefault(); 
      } } 
    }).blur(function(e){ 
       if($(this).val()!=""){ 
        if (!isNaN(parseFloat($(this).val()))) { 
         var val1=parseFloat($(this).val()).toFixed(2); 
         $(this).val(val1); 
         $(this).parent('td').text( 
           $(this).val() 
         ); 
         } 
        } 
        else{ 
          $(this).parent('td').text("0.00"); 
        } 
      });  
}); 

$(function() { 
     $('table tr td').hover(function() { 
      $(this).css('background-color', '#FFFFB0'); 
     }, 
     function() { 
      $(this).css('background-color', '#F4F4F4'); 
     }); 
    }); 

Please see JS FIDDLE HERE

Answer 1

这将使当你点击一个领域是重点：

var input = $("<input type='text' size='5' />").val($(this).text()); 
$(this).empty().append(input); 
input.focus(); 

这是你更新的jsfiddle：

Demo