У меня есть строки таблицы, которые выглядят так:
{% for item in items %}
<tr class="rows"></tr>
{% endfor %}
и столбцы, которые выглядят так:
{% for item in items2 %}
<div class='bar bars'></div>
{% endfor %}
теперь я хочу прикрепить каждый столбец к его строке, первый столбец к первому ряду и т. Д. ...
Итак, я обнаружил, что нижеприведенное не работает, потому что .innerHtml не является атрибутомобъект jquery, поэтому я попытался использовать .html, но это тоже не работает.
$(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: Аргумент 1 ('узел') для Node.appendChild должен быть экземпляром Node
Поэтому я попытался сначала присвоить идентификатор каждой строке и строке в отдельности:
<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: Аргумент 1 ('узел') для Node.appendChild должен быть экземпляром Node
Спасибо за любую помощь