How to Compare values of two columns and then change text based on comparison in loop

Question

I need to go through loop for data grid, compare values column1.cell1 with column2.cell1 and then column1.cell2 with column2.cell2 and so on... and based on comparison show an image with text in first column

should I first need to put values of two columns in two arrays to compare? Or what should be code

$('#dataGrid tr th').each(function() {
   ??
});

Answer 1

let opdatalist = document.getElementsByClassName("opdata")
    for (let i = 1; i <= opdatalist.length; i++) {
        if (document.getElementById("predata" + i).textContent != document.getElementById("postdata" + i).textContent) {
            let newopdata = document.getElementById("postdata" + i)
            newopdata.style.fontWeight = "bold";
            newopdata.style.backgroundColor = "yellow";
        }
    }    

<table class="datatable-master mt-2" border="1">
    <tr>
        <th>Measurement</th>
        <th>Engineering A&S</th>
        <th>Approved A&S</th>
    </tr>
    <tr class="opdata">
        <td>Varus/Valgus Angle
            (Measured from the Femoral Anatomic Axis to the Tibial
            Mechanical Axis)</td>
        <td id="predata1">3.6° Valgus</td>
        <td id="postdata1">3.6°</td>
    </tr>
    <tr class="opdata">
        <td>Flexion/Extension Angle
            (Measured from the Femoral Anatomic Axis to Tibial
            Mechanical Axis on the Sagittal Plane)</td>
        <td id="predata2">2.3° Flexion</td>
        <td id="postdata2">2.3° Flexion</td>
    </tr>
    <tr class="opdata">
        <td>Hip-Ankle Line</td>
        <td id="predata3">761.3 mm</td>
        <td id="postdata3">761.3 mm</td>
    </tr>
    <tr class="opdata">
        <td>HKA Angle</td>
        <td id="predata4">X°</td>
        <td id="postdata4">7°</td>
    </tr>
    <tr class="opdata">
        <td>Distal cut is referenced to </td>
        <td id="predata5">Mechanical Axis – 0° Valgus</td>
        <td id="postdata5">Mechanical Axis – 0° Valgus</td>
    </tr>
    <tr class="opdata">
        <td>Femoral rotation</td>
        <td id="predata6">3° external to posterior
            condyles</td>
        <td id="postdata6">4° external to posterior
            condyles</td>
    </tr>
    <tr class="opdata">
        <td>Distal resection level</td>
        <td id="predata7">10 mm</td>
        <td id="postdata7">10 mm</td>
    </tr>
    <tr class="opdata">
        <td>Femoral component flexion/extension</td>
        <td id="predata8">X°</td>
        <td id="postdata8">X°</td>
    </tr>
    <tr class="opdata">
        <td>Size/Technology</td>
        <td id="predata9">4R Evolution® CS</td>
        <td id="postdata9">4R Evolution® CS</td>
    </tr>
    <tr class="opdata">
        <td>Distal Medial Resection</td>
        <td id="predata10">10 mm</td>
        <td id="postdata10">12 mm</td>
    </tr>
    <tr class="opdata">
        <td>Distal Lateral Resection</td>
        <td id="predata11">8.6 mm</td>
        <td id="postdata11">8.6 mm</td>
    </tr>
</table>

Answer 2

Try this one.Given example may be helpful for you.

HTML:

<table cellspacing="0" rules="all" border="1" id="gvCommentSample" style="width:30%;border-collapse:collapse;">
<tr>
    <th scope="col">Column1</th><th scope="col">Column2</th><th scope="col">IsMatch</th>
</tr><tr>
    <td>1</td><td>1</td><td>
            </td>
</tr><tr>
    <td>2</td><td>2</td><td>
            </td>
</tr><tr>
    <td>3</td><td>4</td><td>
            </td>
</tr><tr>
    <td>4</td><td>5</td><td>
            </td>
</tr>

JQUERY:

$("#gvCommentSample tr").each(function(){
    if($(this).find("td:eq(0)").html()==$(this).find("td:eq(1)").html())
    {
       //$(this).find("td:eq(2) span").text("matched");
       $(this).find("td:eq(2)").html("<img alt='' src='Image/matchedImage.png' />");
    }   
});

CLICK HERE TO SEE THE DEMO

Answer 3

$('#dataGrid tr').each(function() {
    var cell1 = $('td:nth-child(1)', this);
    var cell2 = $('td:nth-child(2)', this);

    //Comparison here???
});