Question

我使用的是JQuery，我确信这很简单，但我无法找到解决方案。我有一张员工表，其中包含＆＃34; Number＆＃34;可编辑的列（文本框）。我想在＆＃34; Number＆＃34;中找到重复的内容。列并突出显示那些文本框。例如，在下表中，我想要突出显示值为10和20的所有文本框。此外，当编辑完成且不再重复时，请删除突出显示。

这里是JSFiddle

任何想法？

<table id="employeeTable">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Number</th>        
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>10</td>        
    </tr>
    <tr>
        <td>2</td>
        <td>Sally</td>
        <td>20</td>        
    </tr>
    <tr>
        <td>3</td>
        <td>Mary</td>
        <td>10</td>        
    </tr>
    <tr>
        <td>4</td>
        <td>Sam</td>
        <td>30</td>        
    </tr>
    <tr>
        <td>5</td>
        <td>Chris</td>
        <td>20</td>        
    </tr>
</table>

Answer 1

有不同的可能性，基本上你必须测试一个数组的值是否存在多次，例如像这样。

<强>更新使用值选择器在初始状态下工作正常，但似乎当通过直接用户输入或通过调用.val（）更改值时，HTML属性value不会更改（仅限本机） JS .value）。因此 - 要在此上下文中使用值选择器，html值属性始终使用JS .value进行更新。

function highlightDuplicates() {
    // loop over all input fields in table
    $('#employeeTable').find('input').each(function() {
        // check if there is another one with the same value
        if ($('#employeeTable').find('input[value="' + $(this).val() + '"]').size() > 1) {
            // highlight this
            $(this).addClass('duplicate');
        } else {
            // otherwise remove
            $(this).removeClass('duplicate');
        }
    });
}


$().ready(function() {
    // initial test
    highlightDuplicates();

    // fix for newer jQuery versions!
    // since you can select by value, but not by current val
    $('#employeeTable').find('input').bind('input',function() {
        $(this).attr('value',this.value)
    });

    // bind test on any change event
    $('#employeeTable').find('input').on('input',highlightDuplicates);
});

Updated fiddle is here

Answer 2

我想这就是你正在寻找的东西：

Working : Demo

1）第一个for循环，用于将所有输入值转换为数组inpValArr[]

2）第二个for循环用于排序，找出重复的循环。

3）第三个for循环，用于将类.highLight添加到重复的内容中。

现在所有这一切都在一个函数中：inputCheck()在DOM Ready上调用，在您编辑文本字段后。

inputCheck();
$("#employeeTable input").bind("change paste keyup", function() {
  inputCheck();
});

function inputCheck() {
  var totalInp = $("#employeeTable input").length;
  var inpValArr = [];
  for (var j = 0; j < totalInp; j++) {
    var inpVal = $("#employeeTable input:eq(" + j + ")").val();
    inpValArr.push(inpVal);
  }

  var sorted_arr = inpValArr.sort();
  var results = [];
  for (var i = 0; i < inpValArr.length - 1; i++) {
    if (sorted_arr[i + 1] == sorted_arr[i]) {
      results.push(sorted_arr[i]);
    }
  }
  $('#employeeTable input').removeClass('highLight');
  for (var k = 0; k < totalInp; k++) {
    $('#employeeTable :input[value="' + results[k] + '"]').addClass('highLight');
  }
}

#employeeTable th,
#employeeTable td {
  padding: 0.8em;
  border: 1px solid;
}
#employeeTable th {
  background-color: #6699FF;
  font-weight: bold;
}
.highLight {
  background: red;
}

<table id="employeeTable">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>
      <input type="text" value="10" />
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sally</td>
    <td>
      <input type="text" value="20" />
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Mary</td>
    <td>
      <input type="text" value="10" />
    </td>
  </tr>
  <tr>
    <td>4</td>
    <td>Sam</td>
    <td>
      <input type="text" value="30" />
    </td>
  </tr>
  <tr>
    <td>5</td>
    <td>Chris</td>
    <td>
      <input type="text" value="20" />
    </td>
  </tr>
</table>

Answer 3

你可以很容易地给出一个类，例如'hasInput＆＃39;对于所有输入的td，然后在所有这些上尝试.each并检查它们是10或20的值，然后添加一个类以使它们按照您的意愿进行设置。

HTML：

<table id="employeeTable">
<tr>
    <th>Id</th>
    <th>Name</th>
    <th>Number</th>        
</tr>
<tr>
    <td>1</td>
    <td>John</td>
    <td class="hasInput"><input type="text" value = "10"/></td>        
</tr>
<tr>
    <td>2</td>
    <td>Sally</td>
    <td class="hasInput"><input type="text" value = "20"/></td>        
</tr>
<tr>
    <td>3</td>
    <td>Mary</td>
    <td class="hasInput"><input type="text" value = "10"/></td>        
</tr>
<tr>
    <td>4</td>
    <td>Sam</td>
    <td class="hasInput"><input type="text" value = "30"/></td>        
</tr>
<tr>
    <td>5</td>
    <td>Chris</td>
    <td class="hasInput"><input type="text" value = "20"/></td>        
</tr>

的CSS：

#employeeTable th, #employeeTable td{
    padding:0.8em;
    border: 1px solid;
}
#employeeTable th{
    background-color:#6699FF;
    font-weight:bold;
}
.colored {
    background-color: red;
}

JS：

$('.hasInput > input').each(function() {
    if ($(this).val() == 10 || $(this).val() == 20) {
        $(this).addClass('colored');
    }
});

DEMO

Answer 4

这样可行：

＆＃13;

var dupes=[], values=[];;
$('.yellow').removeClass('yellow');
$('#employeeTable td:nth-child(3) input').each(function(){
    if($.inArray($(this).val(),values) == -1){
        values.push($(this).val());
    }
    else{
        dupes.push($(this).val());
    }
    
});
$('#employeeTable td:nth-child(3) input').filter(function(){return $.inArray(this.value,dupes) == -1 ? false : true }).addClass('yellow');

＆＃13;

#employeeTable th, #employeeTable td{
    padding:0.8em;
    border: 1px solid;
}
#employeeTable th{
    background-color:#6699FF;
    font-weight:bold;
}
.yellow{
    background-color:yellow;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="employeeTable">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Number</th>        
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td><input type="text" value = "10"/></td>        
    </tr>
    <tr>
        <td>2</td>
        <td>Sally</td>
        <td><input type="text" value = "20"/></td>        
    </tr>
    <tr>
        <td>3</td>
        <td>Mary</td>
        <td><input type="text" value = "10"/></td>        
    </tr>
    <tr>
        <td>4</td>
        <td>Sam</td>
        <td><input type="text" value = "30"/></td>        
    </tr>
    <tr>
        <td>5</td>
        <td>Chris</td>
        <td><input type="text" value = "20"/></td>        
    </tr>
</table>

＆＃13;

Answer 5

使用Linq.js的.count()选择器扩展@ axel.michel提供的答案我决定走这条路，因为我无法让JQuery选择器在他的回答中正确工作。而且我真的很喜欢Linq.js，每次实现它的使用时我都会更喜欢它。

var allTextBoxes = $().find('input:text');

// loop over all input fields on page
$(allTextBoxes)
    .each(function() {
        // select any other text boxes that have the same value as this one
        if (Enumerable.from(allTextBoxes).count("$.value == '" + $(this).val() + "'") > 1) {
            // If more than 1 have the same value than highlight this textbox and display an error message
            $(this).addClass('duplicate');
            $('#custom-field-validator').html('Custom fields must have unique names.');
            valid = false;
        } else {
            // otherwise remove
            $(this).removeClass('duplicate');
        }
    });

这样可以正常工作，无需担心值选择器和同步值属性。

JQuery：在表文本框列中标识重复值并突出显示文本框

5 个答案: