Элемент не добавляется в другой элемент
Доброй ночи спящим и кодирующим, вот такая проблема вышла, я пытаюсь добавить картинку с действием в первый столбик таблицы, но добавляется она только в последнюю клеточку первого столбика, почему так? Листинг ниже
JS код (не ругайтесь, новичок)
function create_add_url() {
for (const table_name in urls) {
let need_urls = urls[table_name]
let rows = document.getElementById(table_name).firstElementChild.firstElementChild.firstElementChild;
for (const element_index in need_urls){
let icon = document.createElement('img')
icon.addEventListener('click', (event) => {
document.location = need_urls[element_index]
})
icon.src = plus_path
icon.style = 'align-self:center;cursor:pointer;'
for (let row of Array.from(rows.rows).slice(1)) {
// console.log(row.cells[+element_index + 1].firstElementChild.firstElementChild)
row.cells[+element_index + 1].firstElementChild.firstElementChild.appendChild(icon)
}
}
}
}
HTML код:
<tr class="work_row" data-table-name="Rejuvenation">
<td></td>
<td>
<div class="input_field">
<div class="input_value">
<select name="Rejuvenation___tree_species___5" multiselect-search="true" required="" id="id_Rejuvenation___tree_species___1" multiple="" style="display: none;"><option value="1">Apple</option><option value="2">Orange</option></select><div class="multiselect-dropdown" style="width: 157px;"><div class="multiselect-dropdown-list-wrapper"><input class="multiselect-dropdown-search form-control" placeholder="Search" style="width: 100%; display: block;"><div class="multiselect-dropdown-list" style="height: 20rem;"><div><input type="checkbox"><label>Apple</label></div><div><input type="checkbox"><label>Orange</label></div></div></div><span class="placeholder">Choise option</span></div>
<img src="/static/icons/plus.svg" style="align-self: center; cursor: pointer;"></div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="number" name="Rejuvenation___tree_height___5" step="any" required="" id="id_Rejuvenation___tree_height___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___no_damage___5" id="id_Rejuvenation___no_damage___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___damage_side_shoots___5" id="id_Rejuvenation___damage_side_shoots___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___damage_terminal_shoots___5" id="id_Rejuvenation___damage_terminal_shoots___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___damage_leaves___5" id="id_Rejuvenation___damage_leaves___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___cause_browsing___5" id="id_Rejuvenation___cause_browsing___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___cause_broken_off___5" id="id_Rejuvenation___cause_broken_off___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___cause_fungi_infects___5" id="id_Rejuvenation___cause_fungi_infects___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___cause_beetle___5" id="id_Rejuvenation___cause_beetle___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___cause_peeling_damage___5" id="id_Rejuvenation___cause_peeling_damage___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___other_skidding_trail___5" id="id_Rejuvenation___other_skidding_trail___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="checkbox" name="Rejuvenation___other_fork___5" id="id_Rejuvenation___other_fork___1">
</div>
</div>
</td>
<td>
<div class="input_field">
<div class="input_value">
<input type="text" name="Rejuvenation___other_text___5" maxlength="250" required="" id="id_Rejuvenation___other_text___1">
</div>
</div>
</td>
<td></td>
</tr>
Вот как это работает (на скрине 5 строк но это не важно, всегда картинка вставляется именно в последнюю клеточку столбца):
Ответы (1 шт):
Автор решения: vsemozhebuty
→ Ссылка
Поскольку вы дали только часть разметки, мне трудно понять, что и как вы перебираете. Но скорее всего дело вот в чём: вы создаёте один элемент изображения и пытаетесь несколько раз вставить его в ячейки. При этом этот элемент не размножается, он просто последовательно переходит из ячейки в ячейку, пока не оказывается в последней. Вам нужно переместить создания элемента с привязкой обработчика внутрь цикла — то есть, сколько раз вам нужно вставить, столько раз и создавать новый элемент. Хотя вместо создания множества обработчиков для множества однотипных элементов лучше использовать Делегирование событий.