sosanh_nhieuhang

by bvotcode

HTML

<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">that is veerender</td>
    <td id="new1">this is vearander abc</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 </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>

CSS

.highlight {
  color: red;
}

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

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

JavaScript

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

function highlight(newElem, oldElem) {
var newText = newElem.text();
var oldText = oldElem.text();
var newArr = newText.split("");
var newArr_word = newText.split(" ");
console.log(newArr_word)
var oldArr = oldText.split("");
var oldArr_word = oldText.split(" ");
console.log(oldArr_word)

var newLength = newArr.length;
var newLength_word = newArr_word.length;

var oldLength = oldArr.length;
var oldLength_word = oldArr_word.length;

var len = newLength > oldLength ? newLength : oldLength;
var len_word = newLength_word > oldLength_word ? newLength_word : oldLength_word;
var text = "";
var inserttext = " xxx ";
for(i = 0; i < len_word; i++){
var oldVal_word = oldArr_word[i];
var newVal_word = newArr_word[i];
if (newVal_word != oldVal_word ){
newVal_word = newVal_word == undefined ? " xxx " : newVal_word;
//newVal = newVal == undefined ? inserttext.fontcolor("green") : newVal;
text += '<span class="highlight">' + " "+ newVal_word+ " " + '</span>';
} else {
text += newVal_word;
}
}
newElem.html(text);
}