Jquery - 일치하는 입력 필드 강조 표시

데이터베이스에서 동적으로 생성 된 테이블이 있습니다. 사용자가 수행하는 작업에 따라 1 ~ xxx 행이 생성 될 수 있습니다.Jquery - 일치하는 입력 필드 강조 표시

각 행에는 다른 필드들 중에서 DropDown 및 Input 필드가 있습니다. 드롭 다운 필드가 변경되면 값이 동일한 행 입력 필드에 기록됩니다. 잘 작동합니다.

각 행에 동일한 드롭 다운 옵션이 있으므로 2 개 이상이 동일한 값을 사용하고 있는지 확인하려고합니다.

드롭 다운이 유사하다 :

<select name="sel[]" id="sel1" class="select" /> 
     <option></option> 
     <option value="123">Option 1-1</option> 
     <option value="456">Option 1-2</option> 
     <option value="789">Option 1-3</option> 
</select>

예 : 1 개 행 1-1 옵션이 선택되면

. 이것은 행 1의 해당 입력 필드에 123을 기록합니다.

행 3이 옵션 3-1을 선택하면 123이 입력 필드에 기록됩니다.

그 시점에서 row3의 입력 필드의 배경이 다른 행 입력 값과 일치 할 때 노란색으로 바뀌고 싶습니다.

다른 값을 선택하면 일치하는 것이없는 경우 배경이 흰색으로 되돌아 가고 싶습니다.

$(document).ready(function(){ 
$('#frm1').on('change', 'select[name="sel[]"]', function (event) { 
     var data = $(this).val(); var id = $(this).attr('id'); 
     $('#new_'+id).val(data); 

    $('.select').not($(this)).each(function (index) { 
     var test = $(this).val(); var id = $(this).attr('id'); 

     if (data === test) { 
      $('#new_' + id).css('background-color', '#FFFF80'); 
     } else { 
      $('#new_' + id).css('background-color', '#FFFFFF'); 
     } 
    });  
}); 
});

을 내가 함께있어 얼마나 보여주는 FIDDLE을 프로그래머 : 내가 사용

난 그 말이 바랍니다 ..

JQuery와입니다.

이 기능을 작동시키는 방법에 대한 아이디어 나 제안이 있으십니까?

감사

출처

2014-09-02 Rocket

이 작동 (Fiddle) :

<body> 
<form id="frm1"> 
    <table style="text-align: left; width: 100%;" border="0" 
cellpadding="2" cellspacing="2"> 
    <tbody> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel1" class="select" /> 
     <option></option> 
     <option value="123">Option 1-1</option> 
     <option value="456">Option 1-2</option> 
     <option value="789">Option 1-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel1" id="new_sel1"></td> 
     </tr> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel2" class="select" /> 
     <option></option> 
     <option value="123">Option 2-1</option>  
     <option value="456">Option 2-2</option> 
     <option value="789">Option 2-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel2" id="new_sel2"></td> 
     </tr> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel3" class="select" /> 
     <option></option> 
     <option value="123">Option 3-1</option> 
     <option value="456">Option 3-2</option> 
     <option value="789">Option 3-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel3" id="new_sel3"></td> 
     </tr> 
    </tbody> 
    </table> 
    <br> 
</form> 
</body>

자바 스크립트 :

$(document).ready(function(){ 

     $('#frm1').on('change', 'select[name="sel[]"]', function (event) { 
      var data = $(this).val(); 
     var id = $(this).attr('id'); 
     $('#new_'+id).val(data);  
     $("input[name^='new_sel']").css('background-color', '#FFFFFF'); 

     $("input[name^='new_sel']").each(function(){ 
      var currentVal = $(this).val(); 
      if(currentVal != undefined && currentVal != "" && currentVal != null) 
      { 
       var inputs = $("input[value="+currentVal+"]") 
       if(inputs.length > 1) 
       { 
        inputs.each(function(){$(this).css('background-color', '#FFFF80');}); 
       } 
      }       
     });   

    }); 
})

출처

2014-09-02 08:47:32

예술 - 완벽한 감사 : D – Rocket

당신은 환영 :-) –

있습니다 그냥 하나의 작은 문제를 발견했습니다. 동일한 행의 다른 입력이 동일한 값을 갖는 경우 예 : 123 그러면 강조 표시됩니다. 어떻게하면 'new_sel *'필드 만 강조 표시하고 다른 필드는 강조 표시하지 않을 수 있습니다. input.each (function() {$ (this)) .css ('background-color', '# FFFF80');});'$ ("input [name^= 'new_sel 각각의 (function() {$ (this) .css ('background-color', '# FF4040');});하지만 도움이되지 않았다. 감사합니다 – Rocket

Jquery - 일치하는 입력 필드 강조 표시

답변

관련 문제