Question

这是我的html表。我想用颜色突出显示无与伦比的数据。我已经为此编写了javascript，但它仅适用于第一行。它不适用于剩余的行。请帮我解释一下这个逻辑。

示例输出图片：

＆＃13;

highlight($("#new"), $("#old"));

function highlight(newElem, oldElem) {
  var newText = newElem.text();
  var oldText = oldElem.text();
  var text = "";
  newElem.text().split("").forEach(function(value, index) {
    if (value != oldText.charAt(index))
      text += "<span class='highlight'>" + value + "</span>";
    else
      text += value;
  });
  newElem.html(text);
}

＆＃13;

.highlight {
  color: red;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tdata">
  <tr class="tvalue">
    <th>S.No</th>
    <th>VALUE1</th>
    <th>VALUE2</th>
  </tr>
  <tr class="tvalue">
    <td>1</td>
    <td id="old">this is veerendar</td>
    <td id="new">this is vearander</td>
  </tr>
  <tr class="tvalue">
    <td>2</td>
    <td id="old">123456789</td>
    <td id="new">124353789</td>
  </tr>
  <tr class="tvalue">
    <td>3</td>
    <td id="old">12 34 56 78 32 45</td>
    <td id="new">34 23 56 79 32 46</td>
  </tr>
  <tr class="tvalue">
    <td>4</td>
    <td id="old">ab cd ef sd ef wd</td>
    <td id="new">bc er ef sd ef we</td>
  </tr>
</table>

＆＃13;

Answer 1

感谢您分享此代码段。它真的帮助了我。我尝试了这个，对我有用。我要做的更改是在id或class的末尾添加一个数字，无论您使用什么。由于我的网页是通过脚本生成的，因此在末尾添加数字没有任何问题。

$( ".tvalue" ).each(function( i ) {
        highlight($("#new"+i), $("#old"+i));
      });

function highlight(newElem, oldElem) {
  var newText = newElem.text();
  var oldText = oldElem.text();
  var text = "";
  newElem.text().split("").forEach(function(value, index) {
    if (value != oldText.charAt(index))
      text += "<span class='highlight'>" + value + "</span>";
    else
      text += value;
  });
  newElem.html(text);
}

.highlight {
  color: red;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tdata">
  <tr class="tvalue">
    <th>S.No</th>
    <th>VALUE1</th>
    <th>VALUE2</th>
  </tr>
  <tr class="tvalue">
    <td>1</td>
    <td id="old1">this is veerendar</td>
    <td id="new1">this is vearander</td>
  </tr>
  <tr class="tvalue">
    <td>2</td>
    <td id="old2">123456789</td>
    <td id="new2">124353789</td>
  </tr>
  <tr class="tvalue">
    <td>3</td>
    <td id="old3">12 34 56 78 32 45</td>
    <td id="new3">34 23 56 79 32 46</td>
  </tr>
  <tr class="tvalue">
    <td>4</td>
    <td id="old4">ab cd ef sd ef wd</td>
    <td id="new4">bc er ef sd ef we</td>
  </tr>
</table>

enter image description here

如何比较html表的两列值并用颜色突出显示不匹配的数据？

1 个答案: