Javascript 检测行上的重复项，并在值更改时删除类

你好

我有一个可以在blur上检测重复行的表，我已经实现了它，代码来自及其，但是当我将值更改为唯一值时，我对如何删除类“duplicate”感到困惑

这是我的html

 <table class="table" id="FS-table">
 <thead>
                    <tr>
                        <th width="10%">Format Code</th>
                        <th width="60%">Account Title</th>
                        <th width="30%">Accound Number</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input id="rowId-1" type="text" class="fs-format-code form-control"></td>
                            <td><span class="accound-desc">Cash on Hand</span></td>
                            <td><span class="account-number">11110</span></td>
                        </tr>
                        <tr>
                            <td><input id="rowId-2" type="text" class="fs-format-code form-control"></td>
                            <td><span class="accound-desc">Petty Cash Fund</span></td>
                            <td><span class="account-number">11120</span></td>
                        </tr>
                        <tr>
                            <td><input id="rowId-3" type="text" class="fs-format-code form-control"></td>
                            <td><span class="accound-desc">CCash in Bank</span></td>
                            <td><span class="account-number">11110</span></td>
                        </tr>
                        <tr>
                            <td><input  id="rowId-4" type="text" class="fs-format-code form-control"></td>
                            <td><span class="accound-desc">Accounts Receivable - Trade</span></td>
                            <td><span class="account-number">11320</span></td>
                        </tr>
                        <tr>
                            <td><input id="rowId-5" type="text" class="fs-format-code form-control"></td>
                            <td><span class="accound-desc">Allowance for Bad Debts</span></td>
                            <td><span class="account-number">11110</span></td>
                        </tr>
                    </tbody>
                </table>

---

如果我添加else语句，它只会再次删除添加的“duplicate”类，我该如何正确地执行它，以便它能够正确地检测到重复的值？谢谢你的帮助。如果你觉得我的问题很难理解，请让我知道，这样我就可以马上编辑它。祝你有愉快的一天

您可以在函数开始时删除所有重复的类，然后在内部循环中排除所有标记为重复的类：

$('input.fs-format-code').on('blur', function(){
        var tableRows = $("#FS-table tbody tr");

        /*-- Remove All Duplicate Classes --*/
        tableRows.filter(".duplicate").removeClass("duplicate");

        tableRows.each(function(n){
            var FsInput = $(this).find('input.fs-format-code');

            var id = FsInput.attr('id');
            var row = $(this).find('input.fs-format-code').val();

            /* -- Exclude Duplicates -- */
            tableRows.not(".duplicate").each(function(n){               
                var id2 = $(this).find('input.fs-format-code').attr('id');
                // console.log("id2: "+id2 +", "+"id :"+id);

                if(id2 != id){
                    var row2 = $(this).find('input.fs-format-code').val();
                    console.log("row2 :"+row2 + ", row :"+row);    
                    if (row2 == row)
                    {
                       $(this).addClass('duplicate');
                    }
                }
           });
       });
});

它怀疑这是最有效的方法，但它可能是对当前代码最简单的修改之一

---

在此处更新Fiddle:

为了不更改代码， 有一个技巧可以确定witch输入是否与witch输入相同，只需更改代码的if/else，如下所示：

if (row2 == row && row2 != '' && row != '')
{
     $(this).addClass('duplicate'+id);
}
 else{
     $(this).removeClass('duplicate'+id);
}

---

感谢您的回答@Masoud，但当我测试您的JSFIDLE链接时，它有点问题，但感谢您的努力和想法！：）

if (row2 == row && row2 != '' && row != '')
{
     $(this).addClass('duplicate'+id);
}
 else{
     $(this).removeClass('duplicate'+id);
}