Question

我有一个表，每行包含2行输入文本框：

<table>
    <tr><td><input id="1_1" type="text"></td><td><input id="1_2" type="text"></td></tr>
    <tr><td><input id="2_1" type="text"></td><td><input id="2_2" type="text"></td></tr>
    <tr><td><input id="3_1" type="text"></td><td><input id="3_2" type="text"></td></tr>
</table>

如果用户只填写了其中一个输入文本，我想在该行前面添加某个图标。如果用户填写了两个输入，我想添加一个不同类型的图标。所有这些都是按行进行的。我将如何实现这一目标？

任何建议都将不胜感激。

Answer 1

你有没有尝试过什么？对我来说似乎是一些非常简单的jQuery。

Here's a working example我在输入字段之前添加了一个<td>，并在其中插入<div class="icon"></div>作为所需图标的占位符。

用于更改它的jQuery如下：

$(function(){
    $('input').keyup(function(){
        var row = $(this).parent().parent();
        var inputsChanged = 0;
        row.find('input').each(function(){
            if($(this).val() !== '') inputsChanged++;
        });
        if(inputsChanged === 1){
            row.find('.icon').css('background-color','red');
        }else if(inputsChanged === 2){
            row.find('.icon').css('background-color','green');
        }else if(inputsChanged === 0){
            row.find('.icon').css('background','none');
        }
    });
});

jQuery更新表行取决于用户输入数据的方式

1 个答案: