使用Jquery过滤器检查重复的列数据

bumbumpaw 发表于 Dev

屁股

请注意，我的前两个表数据（Apple和Orange）设置为只读。而且我确实具有动态添加行的功能。看到这个演示演示

如果用户单击Save button，则所有input field从数据库中检测到重复数据或从动态添加的行中最后一次检测到重复数据的用户，border-color将变为红色。

$("#save").off("click").on("click",function(){
var $rows = $('#myTable tbody tr:not(:hidden)');
        $rows.each(function(){
        var $id = $(this).find('td input[type=\'text\']');
            alert($id.val());
        //Im stuck here, for checking column data is duplicate.
      });
});

我期待使用Jquery过滤器，像这样：

$( "li" ).filter( "DUPLICATE DATA()" ).css( "border-color", "red" );

密码

我假设您要定位“名称”列，尽管您可以轻松地将其更改为定位所有列。

基本上，您要遍历所有input元素，并保留对您已经查看过的值的引用：

$("#save").off("click").on("click",function(){
    var existing = [];
    var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
        var value = $(this).val();
        if (existing.indexOf(value) >= 0) {
            return $(this);
        }
        existing.push(value);
    });
    duplicates.closest('tr').css('background-color', 'red');
});

JSFiddle

编辑：为了避免将只读行标记为重复行，该过程不太直接

$("#save").off("click").on("click",function(){
    // Clear status of all elements
    $('#myTable tr').css('background-color', 'none');

    // Get all values first (Apple, Orange, etc) as strings
    var allValues = $('#myTable td:nth-child(3) input').map(function() {
        return $(this).val();
    }).toArray();

    // Iterate unique values individually, to avoid marking a read-only input as duplicate
    var processedValues = [];
    for (var i = 0; i < allValues.length; i++) {
        var value = allValues[i];
        if (value != '' && processedValues.indexOf(value) >= 0) continue;
        var inputs = $('#myTable td:nth-child(3) input').filter(function() { return $(this).val() == value; });
        // Check if this value is in one of the readonly
        var readOnlyInput = inputs.filter(function() { return $(this).is('[readonly]'); });
        if (readOnlyInput.length) {
            inputs.not(readOnlyInput).closest('tr').css('background-color', 'red');
        } else {
            inputs.not(':first').closest('tr').css('background-color', 'red');
        }
        processedValues.push(value);
    }
});