如何在两列以上执行javascript函数并作为第三列返回

Question

我有一个网页，它比较两个.docx文件，并返回文件不匹配的行。我想创建一个diff列，其中字符串之间的diff(我可以将返回作为字符串处理(被"突出显示"。django以以下方式渲染我的html页面：

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

我想应用这个htmldiff函数(https://ourcodeworld.com/articles/read/653/how-to-diff-html-compare-and-highlight-differences-and-generate-output-in-html-with-javascript)，创建第三列，其中将返回高亮显示diff。

我可以动态创建一个"Diff"列，但我不知道如何填充该列。按照上面的链接，函数可以调用如下：

// Diff HTML strings
let output = htmldiff(originalHTML, newHTML);
document.getElementById("output").innerHTML = output;

有没有办法将函数作为第三列返回？工作应用程序可在此处找到https://jurisfai.herokuapp.com/documentcomparer/，我正在努力改善可视化创建第三列。

谢谢你，祝你今天愉快。

Answer 1

是。要在JavaScript中做到这一点，您需要在表行上循环，并引用表单元格来获取/设置数据。类似这样的东西：

var table = document.getElementsByClassName("table")[0];
for(var i = 0; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
cells[2].innerHTML = htmldiff(cells[0].innerHTML, cells[1].innerHTML);
}

看起来htmldiff函数是用JavaScript编写的，所以如果您以某种方式添加第三列(通过从服务器发送一个空列，或者使用一个可以向表添加单元格的JavaScript函数(，这应该对您有效。