jquery - 2 つの列の値を比較し、ループ内の比較に基づいてテキストを変更する方法

Question

データグリッドのループを通過し、値 column1.cell1 を column2.cell1 と比較し、次に column1.cell2 と column2.cell2 などを比較する必要があります...比較に基づいて、最初の列にテキストを含む画像を表示します

比較するために、最初に 2 つの列の値を 2 つの配列に入れる必要がありますか? またはコードであるべきもの

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

Answer 1

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

    //Comparison here???
});

Answer 2

これを試してみてください.与えられた例はあなたに役立つかもしれません.

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>

Jクエリ:

$("#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' />");
    }   
});

ここをクリックしてデモをご覧ください

Answer 3

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>