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

入力するだけでkeypressイベントをキャッチし、値に基づいてクラスを追加/削除する：

$('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/