Question

我试图弄清楚当一个大于零的值输入到文本输入时如何使表格单元格突出显示。我在复选框上看到了很多例子，但似乎无法在文本输入上找到一个例子。

非常感谢任何帮助。

Answer 1

向我们展示一些标记或输入字段。下面的答案是假设输入直接在td内。

<强> 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/

jquery突出显示文本输入上的单元格

3 个答案: