Добавление
Всем привет, у меня есть xml таблица, которая отображает данные Внутри тегов есть селекты () с несколькими Когда я выбираю в селекте какой-то , то у меня выводится соответствующая информация Чтоб было понятно, прикладываю скрины:
Первоначальная таблица
Выбираем что хотим вывести в колонке
Выводим (В 4ом столбце информация поменялась с ageUser на id)
В чем состоит задача: Мы также здесь видим кнопки (+), по нажатию на одну из кнопок мы в этот th (где находится кнопка) должны добавлять ещё один select и уже в каждую ячейку выводить ПО ДВЕ информации в КОЛОНКУ
Прикладываю код:
XML
<?xml version='1.0' encoding='utf-8'?>
<template id="tableID">
<t t-name="tableView">
<div class="row ml16 mr16">
<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
<ul class="sub-menu">
<t t-foreach="field_name" t-as="field" class="col-3">
<th>
<div class="menu">
<div class="menu-box">
<input t-att-class="field" type="checkbox" checked="checked"/>
<div style="padding-left: 10px;">
<t t-esc="field"/>
</div>
</div>
</div>
</th>
</t>
</ul>
<table width="100%" border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<t t-set="count" t-value="0"/>
<t t-foreach="field_name" t-as="field" class="col-3">
<th t-att-class="field" style="
background-color: #7C7BAD;
border: 1px solid #5f5e97;">
<select t-attf-data-index="{{count}}" style="
width: 85px;
width: 85px;
height: 30px;
border: none;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
text-align: center">
<t t-foreach="field_name" t-as="option" class="col-3">
<t t-if="field == option">
<option t-att-class="option" t-esc="option" selected="true">
<t t-esc="field"/>
</option>
</t>
<t t-else="">
<option t-att-class="option" t-esc="option">
<t t-esc="field"/>
</option>
</t>
</t>
</select>
<input type="button" class="add-select" value="+"/>
<t t-set="count" t-value="count + 1"/>
</th>
</t>
</tr>
<t t-foreach="groups" t-as="group" class="col-3">
<t t-set="count" t-value="0"/>
<t t-set="group_data" t-value="groups[group]"/>
<tr>
<t t-foreach="field_name" t-as="field" class="col-3">
<t t-set="filk" t-value="group_data[field]" />
<td t-att-class="field" t-attf-data-index="{{count}}" style="
border: 1px solid #5f5e97;
text-align: center;">
<t t-esc="filk"/>
</td>
<t t-set="count" t-value="count + 1"/>
</t>
</tr>
</t>
</table>
</div>
<script type="text/javascript" src="/academy/static/js/table_checkboxes.js"></script>
</t>
</template>
JS
(function() {
let table = document.querySelector("table");
let copyTable = table.cloneNode(true);
let copyTdAll = copyTable.querySelectorAll("td");
let selects = document.querySelectorAll('select');
let addSelects = document.querySelectorAll(".add-select");
for(let select of selects){
select.addEventListener('change', optionValue);
for(let button of addSelects){
button.addEventListener('click', addSelectFunc);
}
}
function addSelectFunc() {
let button = this;
}
$('input:checkbox').change(function(){
var checkBoxClass = $(this).attr("class");
if(this.checked){
$("th[class='" + checkBoxClass + "']").show();
$("td[class='" + checkBoxClass + "']").show();
}
else{
$("th[class='" + checkBoxClass + "']").hide();
$("td[class='" + checkBoxClass + "']").hide();
}
$('div#Debug').text("hiding " + checkBoxClass);
});
$('.main-item').on('click', function(){
$('.sub-menu').slideToggle(400);
});
$('.main-value').on('click', function(){
$('.sub-menu').slideToggle(400);
});
function optionValue() {
let sel = this;
let option = sel.options[sel.selectedIndex].text;
sel.parentNode.className = option;
let column = sel.getAttribute('data-index')
let optionAll = [];
for(let el of copyTdAll){
if(el.className === option){
optionAll.push(el.innerText);
}
}
let index = 0;
let rows = document.querySelectorAll('tr');
for(row of rows){
let cells = row.querySelectorAll('td');
for(let cell of cells){
if(cell.getAttribute('data-index') === column){
cell.className = option;
cell.innerText = optionAll[index-1];
}
}
index += 1;
}
}
})();