如何在每个表格行上应用突出显示 function？

Question

I developed a web project where I can upload two files and django server execute a function to return the lines that don't match with other in a pandas dataframe which is renderized in a html template. 返回一个两列的表，file1 和 file2。 我想要另一列“突出显示”文本和文本差异。 我对 javascript 编程一无所知，但我不知道如何在每个表行上应用 function。 我的观点.py

def index(request):
    form = UploadFileForm(request.POST, request.FILES)
    if request.method == 'POST':
        if form.is_valid():
            check = CheckFiles(form.cleaned_data["arquivo1"], form.cleaned_data["arquivo2"]).verifica_tamanho()
            if type(check) == str:
                return HttpResponse('The file are the same!')
            #return HttpResponse(check.to_html())
            return render(request, 'index2.html', {'check': check})
            
    else:
        print('Invalid Form!')
    return render(request, 'index.html', {'form': form})

在我的 index2.html 中：

<table class="table" border="1px">
    <thead class="thead-dark">
        <tr>
          <th scope="col">Original File</th>
          <th scope="col">Secondary File</th>
        </tr>
      </thead>
    <tr>
        {% for _, record in check.iterrows %}
            <tr>
                {% for value in record %}
                    <td>{{ value }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tr>
</table>

和亮点 javascript function 是：

highlight($("#new"), $("#old"));

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

.highlight {background-color: #B4D5FF}

所以，我需要一些帮助来了解如何在每个表格行上应用这个 javascript function。 感谢您有一个愉快的一天。

Answer 1

我可以看到你也使用 jquery 所以：

$(.table tr).each(function(index){
 $(this).addClass("highlight");
});

这样您就可以将突出显示应用于每一行。 似乎您当前的突出显示 function “突出显示”字符串中已更改的字符，但我不知道它与行有什么关系...什么是 $("#new")...什么是 $("#老的”）...

**更新 **

$("table tr").each(function(index){
  a = $(this).find("td");
  first_td = a.eq(0);
  second_td = a.eq(1);
  
  highlight(second_td, first_td);
});