Подсветка 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

Используйте функцию .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/

Answer 3

Просто перехватите событие нажатия клавиши на входе и добавьте / удалите класс на основе значения:

$('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');
});