Пример №2 — Мы сами создаем структуру на странице в момент обхода массив элементов.
const fruitsAndVegetables=[['Apple','Mango','Peach','Orange','Lemon'],['Beets','Peas','Carrots']]constfruitsToTable=(array)=>consttable=document.createElement('table');// Добавим видимые границы у таблицыtable.setAttribute('border','1');for(constrowofarray)consttr=table.insertRow();for(constitemofrow)consttd=tr.insertCell();td.textContent=item>>returntable;>document.body.append(fruitsToTable(fruitsAndVegetables));
document.querySelectorAll(`.$`).forEach((n, i) => < n.innerText = arr[i]; >); // или const elems = document.getElementsByClassName(className); for (let i = 0; i < elems.length; i++) < elems[i].textContent = arr[i]; >// или $('.' + className).text(i => arr[i]);
как мне в цикле вывести массив js в формате html [закрыт]
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 4 года назад .
Отслеживать
задан 7 июн 2019 в 20:34
59 1 1 серебряный знак 6 6 бронзовых знаков
пожалуйста перефразируйте и дополните свой вопрос
7 июн 2019 в 20:39
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
let mass = ["1","2","3"]; let b = document.getElementById("body"); mass.forEach(e => b.innerHTML += "
" + e + "
");
Отслеживать
ответ дан 7 июн 2019 в 20:43
Vitaliy Stop_RU_war_in_UA Vitaliy Stop_RU_war_in_UA
3,890 13 13 серебряных знаков 29 29 бронзовых знаков
это не мой вариант jsfiddle.net/BaNru/0z72a91u/3 вот код который нужно вывести как так и подставив в них элементы массива
7 июн 2019 в 20:45
@jobananas по русски напишите что вам нужно. ничего ж не понятною. Пример я привел как делается вставка html в цикле. на ваш вопрос я ответил
7 июн 2019 в 20:49
korzinka.byethost9.com вот сайт нужно нажать на товар и там справа нужно вывести размеры под ценой пример как это выглядит сдесь garne.com.ua/p97075 я базу данных неиспользую вместо нее таблица гугл там размеры буду брать вот делаю вариант в html формате jsfiddle.net/BaNru/0z72a91u/3 мне нужно конкретно его вывести можете использовать в качестве примера мой вариант?
7 июн 2019 в 20:54
// Создаём глобальную переменную для сохранения в неё нашего значения, _согласно_ВОПРОСА_! var GlobalSize; var shoparray = ['s','l','x','xl','xxl']; document.addEventListener("DOMContentLoaded", function()< var spans = '', options = ''; // проходим по циклу. Этот код надо прогонять постоянно при загрузке товара! // Генерируем HTML shoparray.forEach( function(el,i) < spans += ''+el+''; options += ''; >) // Отрисовываем в документе document.querySelector('.product-sizes').insertAdjacentHTML ('afterbegin', spans); document.querySelector('#ProductSize').insertAdjacentHTML ('afterbegin', options); document.querySelector('#ProductSize').selectedIndex[0]; // Код ниже будет работать всегда и его перезапускать не надо! // Щелчок по элементам // Вешаем клик на родителя, чтобы не вешать обработчик на кадлый элемент отдельно document.querySelector('.product-sizes').addEventListener('click',function(e)< // теперь проверяем, что кликнули именно по необходимому элементу // (проверяем по классу), другие будут игнорироваться if(e.target.classList.contains('product-size'))< // запускаем необходимые действия // Удаляем староый seelect (через цикл для надёжности) document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Теперь выбираем текущий элемент e.target.classList.add('selected'); // Сохраняем в переменную согласно вопроса GlobalSize = e.target.dataset.productSize; // Меняем селект, ведь это надо, это подсказывает мой хрустальный шар требуется? document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) // Событие на изменение select document.querySelector('#ProductSize').addEventListener('change',function(e)< // Опять удаляем все старые выделения document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Добавляем новое выделение document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); // Пишем в глобальную значение GlobalSize = e.target.value; >) >);
Отслеживать
ответ дан 7 июн 2019 в 21:07
user337101 user337101
да это оно остается только селект подсветить тем же цветом что и спан подсвечен (выбраный)
7 июн 2019 в 21:12
В CSS пропиши нужный цвет.
– user337101
7 июн 2019 в 21:13
где именно в каком месте?
7 июн 2019 в 21:27
– user337101
7 июн 2019 в 21:29
Вы это имеете в виду? Динамическое создание HTML ? Суть всё еще не понятна))
let sizes = ['s', 'l', 'x', 'xl', 'xxl'] let mama = document.querySelector('.product-sizes'); let select = document.createElement('select'); select.id = "ProductSize"; select.name = "size"; select.size = "1"; for(let i = 0; i < sizes.length; i++)< let span = document.createElement('span'); span.className = 'product-size'; span.setAttribute('data-product-size', sizes[i]); span.innerText = ( sizes[i] ).toUpperCase(); if( i === 0 ) < span.classList.add('selected'); >mama.appendChild( span ); let option = document.createElement('option'); option.value = sizes[i]; option.innerText = ( sizes[i] ).toUpperCase(); select.appendChild( option ); > mama.appendChild( select ); /* Дальше кусок вашего кода, не трогал */ /********************************************/ var GlobalSize; document.addEventListener("DOMContentLoaded", function()< document.querySelector('.product-sizes').addEventListener('click',function(e)< if(e.target.classList.contains('product-size'))< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); e.target.classList.add('selected'); GlobalSize = e.target.dataset.productSize; document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) document.querySelector('#ProductSize').addEventListener('change',function(e)< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); GlobalSize = e.target.value; >) >);