CODEWITHSUNDEEP
jquery
tonydeleon
tonydeleon

Reputation: 151

Find table rows with the same input values

I am looking for a way to put the word "equal" in the first column and highlight the "tr" of all rows where the input values are equal, as in the image. I have this code but it only works if the next - next row is the same:enter image description here

$('.equal').each(function() {

 var car= $(this).closest("tr").find(".car").val();
 var model= $(this).closest("tr").find(".model").val();

 var car1= $(this).closest("tr").nextAll('tr').find(".car").val();
 var model1= $(this).closest("tr").nextAll('tr').find(".model").val();

 if(car==car1 && model==model1 ) {
 $(this).val("EQUAL");
 }

    <table >
    <tr>
            <td >Compare</td>
        <td >Car</td>
        <td>Model</td>
    </tr>
    <tr style="background-color:red">
        <td ><input  type="text" class="equal" value="EQUAL" ></td>
        <td ><input  type="text" class="car" value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td><input  type="text" class="equal" value="" ></td>
        <td><input  type="text" class="car"  value="Mercedes Benz" ></td>
        <td><input  type="text" class="model" value="Clase A" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>
    <tr style="background-color:red" >
        <td ><input  type="text" class="equal" value="EQUAL"></td>
        <td ><input type="text" class="car"  value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Toyota" ></td>
        <td><input type="text" class="model" value="Corolla" ></td>
    </tr>

</table>

Upvotes: 0

Views: 148

Answers (1)

Reflective
Reflective

Reputation: 3917

Well, it might be not optimal but it dos the job.

var trs = $('table tr').toArray();
// remove the header TR from the collection
trs.shift();

$(trs).each(function(i, current) {

 var car = $(current).find(".car").val();
 var model = $(current).find(".model").val();
 
 var others = $.grep(trs, function(el) { 
   var car1 = $(el).find(".car").val();
   var model1 = $(el).find(".model").val();
   return ((el != current) && (car == car1) && (model == model1));
 });

if (others.length) {
  $(others).each(function(i, el){
   $(el).addClass('tr-red').find(".equal").val('EQUAL');
  });
 }

});
.tr-red{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
    <tr>
            <td >Compare</td>
        <td >Car</td>
        <td>Model</td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text" class="car" value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td><input  type="text" class="equal" value="" ></td>
        <td><input  type="text" class="car"  value="Mercedes Benz" ></td>
        <td><input  type="text" class="model" value="Clase A" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value=""></td>
        <td ><input type="text" class="car"  value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Toyota" ></td>
        <td><input type="text" class="model" value="Corolla" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Ford" ></td>
        <td><input type="text" class="model" value="Focus" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>

</table>

Upvotes: 1

Related Questions