Question

我有一个这样的HTML表。

<table class="TableA">
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">aa</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="a">aa</td>
    </tr>
    <tr>
      <td>3</td>
      <td class="a">bb</td>
    </tr>

    <tr>
      <td>4</td>
      <td class="a">cc</td>
    </tr>
    <tr>
      <td>5</td>
      <td class="a">dd</td>
    </tr>
    <tr>
      <td>6</td>
      <td class="a">ee</td>
    </tr>
    <tr>
      <td>7</td>
      <td class="a">ee</td>
    </tr>
  </tbody>
</table>

如何按列<td class="a">值html替换颜色？这样的结果

我已经尝试过此JS代码。

我的想法是找到所有("td.a")并比较字符串。如果为bgColor = "red"，则为true。

$(".TableA").each(function () {
    if ($(this).find("td.a")[0].innerHTML == $(this).find("td.a")[1].innerHTML) {
        $(this).find("td.a")[0].bgColor = "red";
    } else {
    $(this).find("td.a")[0].bgColor = "white";
    }
});

Answer 1

要突出显示具有相同文本的结果行，可以使用next()比较下一个元素并相应地添加类。

$(".TableA tr").each(function() {
  let now = $(this).find('td').last();
  let next = $(this).next().find('td').last();
  if (now.text() == next.text()) {
    now.addClass('red');
    next.addClass('red');
  }
});

.red {
  background: red;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<table class="TableA">
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">aa</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="a">aa</td>
    </tr>
    <tr>
      <td>3</td>
      <td class="a">bb</td>
    </tr>

    <tr>
      <td>4</td>
      <td class="a">cc</td>
    </tr>
    <tr>
      <td>5</td>
      <td class="a">dd</td>
    </tr>
    <tr>
      <td>6</td>
      <td class="a">ee</td>
    </tr>
    <tr>
      <td>7</td>
      <td class="a">ee</td>
    </tr>
  </tbody>
</table>

Answer 2

如果要将两个具有相同innerHTML的同级td设为红色背景，可以尝试使用此代码，这很容易理解：

    const testArray = $(".TableA td.a")
    testArray.map(function(index) {
      // Be careful out of the array
      if (index === testArray.length - 1) return 0;
      if (
        testArray[index].innerHTML ===
        testArray[index + 1].innerHTML
      ) {
        testArray[index].style.background = "red";
        testArray[index + 1].style.background = "red";
      } else {
        testArray[index].style.background = "white";
      }
    });

按列值HTML交替显示颜色？

2 个答案: