I am facing a weird problem when creating dynamic elements with Javascript some text is rendering twice I don't know why it's happening
this is the output I am getting when I am creating with javascript please check this screenshot at this link https://i.ibb.co/dP3BqrT/current-output.png
I am expecting output like this, please check the screenshot In the attached link https://i.ibb.co/rvPGt5d/expected-output.png
here is the code pen link https://codepen.io/motailab/pen/JjpMyBd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
.basic-table,
.atomic-table {
width: 300px;
margin: 0 auto;
}
.atomic-table {
width: 800px;
}
.basic-table .header {
font-weight: bold;
border-bottom: 4px solid #000;
margin: 0;
padding: 0;
box-sizing: border-box;
padding: 4px;
margin-top: 10px;
}
.basic-table .basic-group {
border: 1px solid gray;
padding: 4px;
}
.basic-table .spacer {
display: block;
width: 100%;
height: 14px;
}
.basic-table .total {
padding: 4px;
background: #E2EAEB;
border: 1px solid gray;
}
.atomic-table .heading {
border-bottom: 4px solid #000;
font-weight: bold;
padding: 10px 5px;
}
.atomic-total,
.atomic-row {
display: flex;
justify-content: space-between;
}
.atomic-total .atomic-col,
.atomic-row .atomic-col {
width: 100%;
text-align: right;
padding: 5px;
border: 1px solid rgba(170, 169, 169, 0.651);
border-left: 0;
border-top: 0;
border-bottom: 0;
box-sizing: border-box;
}
.atomic-total .atomic-col:first-child,
.atomic-row .atomic-col:first-child {
text-align: left;
}
.rowlabelc {
font-weight: bold;
}
.highlightc {
background: #E2EAEB;
font-weight: bold;
}
.atomic-spacer {
height: 10px;
}
.atomic-col.spacerc {
border: 0;
width: 8px;
border-right: 1px solid rgba(170, 169, 169, 0.651);
min-width: 6px;
}
.atomic-row-group .atomic-row:last-child .rowlabelc,
.atomic-row-group .atomic-row:last-child .basicc {
border-bottom: 1px solid rgba(170, 169, 169, 0.651);
}
.atomic-row-group .atomic-row:first-child .rowlabelc,
.atomic-row-group .atomic-row:first-child .basicc {
border-top: 1px solid rgba(170, 169, 169, 0.651);
}
.atomic-row-group .atomic-total:last-child .rowlabelc,
.atomic-row-group .atomic-total:last-child .basicc {
border-bottom: 1px solid rgba(170, 169, 169, 0.651);
border-top: 1px solid rgba(170, 169, 169, 0.651);
}
.atomic-spacer .atomic-col.highlightc {
background-color: #fff;
border-right-color: transparent;
}
.atomic-row-group .atomic-row:last-child .highlightc {
border-bottom: 1px solid rgba(170, 169, 169, 0.651);
}
.atomic-row-group .atomic-row:first-child .highlightc {
border-top: 1px solid rgba(170, 169, 169, 0.651);
}
.atomic-total {
background: #E2EAEB;
}
.atomic-total .spacerc {
background: #fff;
}
.border-right-transparent {
border-right-color: transparent !important;
}
</style>
</head>
<body>
<div >
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const rows = ['header', 'basic', 'basic', 'basic', 'spacer', 'total', 'spacer', 'basic', 'basic', 'header', 'total'];
const columns = ['rowlabelc', 'basicc', 'basicc', 'spacerc', 'highlightc'];
function checkNextColumn(columns, i) {
try {
if ((columns[i] !== 'spacerc' && columns[i 1] !== 'spacerc' && columns[i] !== 'highlightc' && columns[i 1] !== 'highlight') && (columns[i] === 'rowlabelc' || columns[i] === 'basicc')) {
return 'border-right-transparent';
} else {
return null;
}
} catch (error) {
return null
}
}
function groupByRows(rows = []) {
const groups = [];
for (let i = 0; i < rows.length; i ) {
if (i === 0) {
groups.push([rows[i]]);
} else {
if (rows[i] === rows[i - 1]) {
groups[groups.length - 1].push(rows[i]);
} else {
groups.push([rows[i]]);
}
}
}
return groups;
}
function createTables(rows, columns) {
const atomicTable = document.querySelector('.atomic-table');
const groups = groupByRows(rows);
console.log(groups);
for (const group of groups) {
if (group.length > 1) {
const atomicRowGroup = document.createElement('div');
atomicRowGroup.classList.add('atomic-row-group');
for (const row of group) {
const atomicRow = createRow(row, columns);
atomicRowGroup.appendChild(atomicRow);
}
atomicTable.appendChild(atomicRowGroup);
} else {
const atomicRow = createRow(group[0], columns, true);
atomicTable.appendChild(atomicRow);
}
}
}
function createRow(row, columns, wrap=false) {
const atomicRow = document.createElement('div');
if (row === 'header') {
atomicRow.classList.add('heading');
atomicRow.textContent = 'Heading';
return atomicRow;
} else if (row === 'total') {
atomicRow.classList.add(...['atomic-total', 'atomic-row']);
} else if (row === 'spacer') {
atomicRow.classList.add(...['atomic-spacer', 'atomic-row']);
} else if (row === 'basic') {
atomicRow.classList.add('atomic-row');
}
for (let i = 0; i < columns.length; i ) {
const atomicCol = document.createElement('div');
if (columns[i] === 'rowlabelc') {
atomicCol.classList.add(...['atomic-col', 'rowlabelc', row === 'spacer' ? checkNextColumn(columns, i) : null]);
atomicCol.innerHTML = 'foo';
} else if (columns[i] === 'basicc') {
atomicCol.classList.add(...['atomic-col', 'basicc', row === 'spacer' ? checkNextColumn(columns, i) : null]);
atomicCol.innerHTML = '10';
} else if (columns[i] === 'spacerc') {
atomicCol.classList.add(...['atomic-col', 'spacerc']);
} else if (columns[i] === 'highlightc') {
atomicCol.classList.add(...['atomic-col', 'highlightc']);
atomicCol.innerHTML = '10';
}
atomicRow.appendChild(atomicCol);
}
if ((row === "total" || row === "basic") && wrap) {
const atomicRowGroup = document.createElement('div');
atomicRowGroup.classList.add('atomic-row-group');
atomicRowGroup.appendChild(atomicRow);
return atomicRowGroup;
}
return atomicRow;
}
createTables(rows, columns);
});
</script>
</body>
</html>
CodePudding user response：
if(row === "spacer") {
atomicCol.innerHTML = '';
}
Just need to above before atomicRow.appendChild(atomicCol);