jquery - 如何比较两列的值，然后根据循环中的比较更改文本

Question

我需要遍历数据网格的循环，将 column1.cell1 与 column2.cell1 的值进行比较，然后将 column1.cell2 与 column2.cell2 进行比较，依此类推...并根据比较在第一列中显示带有文本的图像

我应该首先需要将两列的值放在两个数组中进行比较吗？或者应该是什么代码

$('#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>

查询：

$("#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>