Django + JQuery-将栏附加到表格行 [英] Django + JQuery - Append bars to table rows

问题描述

我的表行看起来像这样:

I have table rows that look like this:

{% for item in items %}
    <tr class="rows"></tr>
{% endfor %}

和如下所示的条形图:

{% for item in items2 %}
    <div class='bar bars'></div>
{% endfor %}

现在我想将每个栏附加到其行，将第一栏附加到第一行，依此类推...

now I want to attach each bar to it's row, the first bar to the first row and so on...

因此我发现以下内容不起作用，因为.innerHtml不是jquery对象的属性，因此我尝试使用.html，但这也不起作用.

So I found out that the below does not work because .innerHtml is not an attribute of a jquery object, so I tried using .html but that doesnt work either.

$(document).ready(function(){
    bars = document.querySelectorAll('.bars').forEach(function (element, index) {
    var iBars = 0;
    document.querySelectorAll('.rows').forEach(function (element, index) {
    element.innerHTML = iBars < bars.length ?
    bars[iBars] :
    '';
    iBars++;
    })
    })
});

我明白了:

我也尝试使用片段:

document.querySelectorAll('.bars').forEach(function (element, index) {
    allbars = $(this);
    var fragment = document.createDocumentFragment();
    fragment.appendChild(allbars);
    rows = document.querySelectorAll('.rows').forEach(function (element, index) {
    rows.appendChild(fragment);
    })
});

由此我得到:TypeError:Node.appendChild的参数1("node")必须是Node的实例

with this I get: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

所以我尝试先为每个行和栏分别分配一个ID:

So I tried assigning an ID to each row and bar individually first:

<div class="rows" id="row{{ forloop.counter }}" ></div>
<div class='bars' id="bar{{ forloop.counter }}" ></div>

var thisrows = $("#row1");
console.log(thisrows);
var thisbars = $("#bar1");
console.log(thisbars);
var fragment = document.createDocumentFragment();
fragment.appendChild(thisbars);
$(thisrows).appendChild(fragment);

但仍然:TypeError:Node.appendChild的参数1(节点")必须是Node的实例

but still: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

谢谢您的帮助

推荐答案

从后端代码准备数据，例如创建一个字典，在一个键下将item和items2组合在一起.它比Django渲染器快.

Prepare your data from the backend code like creating a dictionary that combines items and items2 under one key. it's faster than Django renderer.

这篇关于Django + JQuery-将栏附加到表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！