jquery突出顯示文本輸入上的單元格

Question

我想弄清楚當大於零的值輸入到文本輸入時如何使表格單元格突出顯示。我在複選框上看到了很多示例，但似乎無法在文本輸入中找到示例。

任何幫助是極大的讚賞。

Answer 1

我們看一些標記或輸入欄。下面的答案是假設輸入直接在td之內。

DEMO

HTML：

<table> 
    <tr> 
     <td> 
      <input type="text" class="number" /> 
     </td> 
     <td> 
      <input type="text" class="number" /> 
     </td> 
    <tr>   
     <td> 
      <input type="text" class="number" /> 
     </td> 
     <td> 
      <input type="text" class="number" /> 
     </td> 
    </tr> 
</table> 

JS：

$('.number').keyup(function() { 
    var number = $(this).val(); 

    try { 
     number = parseInt(number, 10); 
     if (number > 0) { 
      $(this).closest('td').addClass('highlight'); 
     } else { 
      $(this).closest('td').removeClass('highlight'); 
     } 

    } catch (e) {} 
}); 

CSS：

td { border: 1px solid black; padding: 10px; } 

td.highlight { border: 1px solid red; } 

input { width: 100px; } 

Answer 2

正好趕上輸入按鍵事件，並添加/刪除基於值類：

$('td input[type=text]').keypress(function(ev) { 
    var $input = $(this); 
    var $cell = $input.closest('td'); 

    if (Number($input.val()) > 0) $cell.addClass('highlight'); 
    else $cell.removeClass('highlight'); 
}); 

Answer 3

使用.change()函數，例如，像這樣的：

HTML

<input type="text" /> 

<table> 
    <tr> 
     <td>cell</td> 
    </tr> 
</table> 

的JavaScript

$('input').change(function() { 
    var val = parseInt($(this).val()); 
    if(val > 0) { 
     $('td').addClass('highlight'); 
    } else { 
     $('td').removeClass('highlight'); 
    } 
}); 

CSS

td.highlight { 
    background-color: cyan; 
} 

這裏有一個工作示例：

• http://jsfiddle.net/LsA7F/