@MarkLb

Как можно сократить запись создания одинаковых элементов?

В tr добавляется несколько td. Вот такой вариант записи сейчас:

function createPayment({id, sum, system, date})
{
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const addPaymentCell = value => {
        const td = document.createElement("td");
        td.innerText = value;
        return td;
    };

    payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));
}


Мне кажется, его можно сократить как-то правильно использовав цикл, чтобы не дублировать:
payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));


По-сути, можно применить foreach. Но придётся заново создавать объект, прописывая переменные: id, sum, system, date. Либо отказаться от деструктурирующее присваивание в аргументах функции(либо провести его позже).

function createPayment({id, sum, system, date}) {
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const object = {id, sum, system, date};
    object.forEach(value => {
        const td = document.createElement("td");
        td.innerText = value;
       payment.append(td);
    });
}


А можно ли как-то чисто перечислив переменные создать по ним обход циклом?
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Убираем деструктуризацию параметра (ну или можете оставить, тогда кавычки долой, вместо paymentData[n] будет просто n), вместо десяти строк пишем три:

payment.innerHTML = [ 'id', 'sum', 'system', 'date' ]
  .map(n => `<td>${paymentData[n]}</td>`)
  .join('');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы