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

Question

我开发了一个 web 项目，我可以在其中上传两个文件，django 服务器执行一个函数以返回在 html 模板中呈现的 pandas 数据框中与其他行不匹配的行。返回一个两列的表，file1 和 file2。我想要另一列“突出显示”文本和文本差异。我对 javascript 编程一无所知，但我不知道如何在每个表行上应用该函数。 我的意见.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函数是：

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 函数。 谢谢你，祝你有美好的一天。

Answer 1

我可以看到你也使用 jquery：

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

这样您就可以对每一行应用高亮显示。 似乎您当前的突出显示功能“突出显示”字符串中已更改的字符，但我不知道它与行有什么关系...什么是 $("#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);
});