如果值不同，則更改顏色文本（僅限CSS和jquery）

我的代碼有以下幾行：

<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
    <table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
        <tbody>
            <tr>
                <td colspan="2">
                    Verizon Information:
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Account Name
                </td>
                <td>
                    <span>0442047510-00001</span><br>
                    <span>0442047510-00001</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Billing Cycle End Date
                </td>
                <td>
                    <span>2021-07-01T00:00:00</span><br>
                    <span>2022-01-12T00:00:00</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Carrier Name
                </td>
                <td>
                    <span>null</span><br>
                    <span>null</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Service Plan
                </td>
                <td>
                    <span>40515x48526x75802x84777</span><br>
                    <span>M2MPublicDynamic</span><br>
                </td>
            </tr>
        </tbody>
    </table>
</div>

頁面有許多不同的類值鍵：

div class="verizon-data-duplicate-device-key-**89148000004605691537** k-content k-state-active"

其中 89148000004605691537 是可變的

當同一 td 的跨度內的值不同時，我想將文本顏色更改為紅色。

例如：

    <td>
        <span>2021-07-01T00:00:00</span><br>
        <span>2022-01-12T00:00:00</span><br>
    </td>

應該是紅色的

但

        <td>
            <span>0442047510-00001</span><br>
            <span>0442047510-00001</span><br>
        </td>

不應該是紅色的。

并且比較應該只在相同的 td 內。可以添加任何 css 類。

如何實施？

uj5u.com熱心網友回復：

  $("table td").map(function(e) {
        if($(this).children("span").length){
            if($(this).children("span").contents()[0].textContent != $(this).children("span").contents()[1].textContent){
                $(this).addClass("text-danger"); 
            }
        }
    });

.text-danger {
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
    <table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;" border="1">
        <tbody>
            <tr>
                <td colspan="2">
                    Verizon Information:
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Account Name
                </td>
                <td>
                    <span>0442047510-00001</span><br>
                    <span>0442047510-00001</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Billing Cycle End Date
                </td>
                <td>
                    <span>2021-07-01T00:00:00</span><br>
                    <span>2022-01-12T00:00:00</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Carrier Name
                </td>
                <td>
                    <span>null</span><br>
                    <span>null</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Service Plan
                </td>
                <td>
                    <span>40515x48526x75802x84777</span><br>
                    <span>M2MPublicDynamic</span><br>
                </td>
            </tr>
        </tbody>
    </table>
</div>

uj5u.com熱心網友回復：

//searches cells containing two spans
//if the two spans don't have the same text content, add the class to
//the spans to color the text red
$('td').each(function(){       
      const $td = $(this);
      const $spans = $td.find('span');
     
      if($spans.length === 2){
          if($spans[0].textContent !== $spans[1].textContent){
              $spans[0].classList.add('color-red');
              $spans[1].classList.add('color-red');
          }
      }
});

.color-red{
  color:red;
}

<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
    <table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
        <tbody>
            <tr>
                <td colspan="2">
                    Verizon Information:
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Account Name
                </td>
                <td>
                    <span>0442047510-00001</span><br>
                    <span>0442047510-00001</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Billing Cycle End Date
                </td>
                <td>
                    <span>2021-07-01T00:00:00</span><br>
                    <span>2022-01-12T00:00:00</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Carrier Name
                </td>
                <td>
                    <span>null</span><br>
                    <span>null</span><br>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Service Plan
                </td>
                <td>
                    <span>40515x48526x75802x84777</span><br>
                    <span>M2MPublicDynamic</span><br>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous"></script>

標籤：html 查询 css

上一篇：在wordpress中通過php和jquery傳遞變數

下一篇：參考通過NPM（在node_modules檔案夾中）安裝的JavaScript庫的最佳實踐是什么？