I have two tables with the ability to select a checkbox. Each table has a corresponding array of values (objLeft, objRight). the row index (value) is equal to the array index number, then I search for all selected checkboxes in each table document.getElementById('leftTable').querySelectorAll('input[type=checkbox]:checked'); document.getElementById('rightTable').querySelectorAll('input[type=checkbox]:checked');
And I go into the array of each in order to form a new paramList array, as a rule, the values of the right column appear there, but you need to add the Valfilter key with the data of the left column The problem is that only the last values \u200b\u200bof the left table (the same ), I don’t understand how to make a loop to match these objects and package them so that each row of the right table has the values of the left table in order.
What i need get :
0:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 1',
table_name: "headersParams",
Valfilter: {
'vParam' : "param",
'vDescr' : "Voltage 1.2",
'vVal' : "80"
}
}
},
1:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 1',
table_name: "headersParams",
Valfilter: {
'vParam' : "param",
'vDescr' : "Voltage 1.3",
'vVal' : "80"
}
}
},
2:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 2',
table_name: "headersParams",
Valfilter: {
'vParam' : "param",
'vDescr' : "Voltage 1.2",
'vVal' : "80",
}
},
3:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 2',
table_name: "headersParams",
Valfilter: {
'vParam' : "param",
'vDescr' : "Voltage 1.3",
'vVal' : "80",
}
}
}
selected value in lable left = all selected values right
let objLeft = [
{
descr: "Voltage 1.2",
table_name: "headersParams",
column_name: 'param',
val: "81"
},
{
descr: "Voltage 1.3",
table_name: "headersParams",
column_name: 'param',
val: "82"
},
{
descr: "Thread tension",
table_name: "headersParams",
column_name: 'param',
val: "83"
},
{
descr: "Line tension",
table_name: "headersParams",
column_name: 'param',
val: "84"
}
];
let objRight =[
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 1',
table_name: "headersParams"
},
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 2',
table_name: "headersParams"
},
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'value 3',
table_name: "headersParams"
}
];
function funcVal(){
let paramList = [];
var checkboxesLeft = document.getElementById('leftTable').querySelectorAll('input[type=checkbox]:checked');
var checkboxesRight = document.getElementById('rightTable').querySelectorAll('input[type=checkbox]:checked');
checkboxesLeft.forEach((valL) => {
checkboxesRight.forEach((valR) => {
objRight[valR.value].Valfilter = {
'vParam' : objLeft[valL.value].column_name,
'vDescr' : objLeft[valL.value].descr,
'vVal' : objLeft[valL.value].val,
'vParamRus' : 'Параметр '
}
paramList.push({
'shop' : paramKeyShop,
'agr' : paramKeyAgr,
'table' : paramKeyTable,
'columns': objRight[valR.value]
})
})
});
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="leftTable">
<thead>
table 1
</thead>
<br/>
<tbody>
<input class="checkbox checkbox-lg" type="checkbox" value="0" > 0
<input class="checkbox checkbox-lg" type="checkbox" value="1" > 1
<input class="checkbox checkbox-lg" type="checkbox" value="2" > 2
<input class="checkbox checkbox-lg" type="checkbox" value="3" > 3
</tbody>
</table>
<br/>
<table id="rightTable">
<thead>
table 2
</thead>
<br/>
<tbody>
<input class="checkbox checkbox-lg" type="checkbox" value="0" > 0
<input class="checkbox checkbox-lg" type="checkbox" value="1" > 1
<input class="checkbox checkbox-lg" type="checkbox" value="2" > 2
</tbody>
</table>
<button onClick="funcVal()">click</button>