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