Create a divs table using javascript

Question

I'm trying to create a divs table using javascript. Here is my code.

var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
data.forEach((item, i) => {
  if (i % 2 == 0)
    html += `<div class="row">`;
  if (i % 2 == 0)
    html += `<div class="left">${item}</div>`;
  if (i % 2 != 0)
    html += `<div class="right">${item}</div>`;
  if (i % 2 == 0)
    html += `</div>`;
    html+=`<div class="seperator"></div>`;
})


console.log(html);

the output that I get is

<div class="row">
  <div class="left">a</div>
</div>
<div class="seperator"></div>
<div class="right">b</div>
<div class="seperator"></div>
<div class="row">
  <div class="left">c</div>
</div>
<div class="seperator"></div>
<div class="right">d</div>
<div class="seperator"></div>
<div class="row">
  <div class="left">e</div>
</div>
<div class="seperator"></div>

But my target Is something like this, in terms of the table. have a 2 columns table.

When coming to div, the first column is going to be <div class="left"> and 2nd being <div class="right">, the new row seperator will be <div class="seperator"></div>. My expected output is as below.

<div class="row">
  <div class="left">a</div>
  <div class="right">b</div>
</div>
<div class="seperator"></div>
<div class="row">
  <div class="left">c</div>
  <div class="right">d</div>
</div>
<div class="seperator"></div>
<div class="row">
  <div class="left">e</div>
</div>
<div class="seperator"></div>

Please let me know how Can I achieve this.

Thanks

epascarello · Accepted Answer · 2022-01-10 16:28:22Z

2

Why not just do it in a for loop and loop by 2? That way you do not have to worry about closing the tags.

const makeRow = (col1, col2) => {
  const col2HTML = col2 ? `<div class="right">${col2}</div>` : '';
  return `
  <div class="row">
    <div class="left">${col1}</div>
    ${col2HTML}
  </div>
  <div class="seperator"></div>`;
};

var data = ['a', 'b', 'c', 'd', 'e'];
var html='';

for(let i=0; i< data.length; i+=2) {
  html += makeRow(data[i], data[i+1]);
}

console.log(html);

If you really want to do it your way, you have to add a check to see if you are at the end of the array.

var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
data.forEach((item, i, arr) => {
  if (i % 2 == 0)
    html += `<div class="row">\n`;
  if (i % 2 == 0)
    html += `  <div class="left">${item}</div>\n`;
  if (i % 2 != 0)
    html += `  <div class="right">${item}</div>\n`;
  if (i % 2 != 0 || i === arr.length - 1) {
    html += `</div>\n`;
    html+=`<div class="seperator"></div>\n`;
  }
})


console.log(html);

edited Jan 10, 2022 at 16:28

answered Jan 10, 2022 at 16:22

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3872094 Over a year ago

This is awesome. Thank you. I'll try thinking this way from next time :-)

GigaWarTrex · Accepted Answer · 2022-01-10 16:32:51Z

1

It's probably easier to accomplish if you just loop through the array in 2-big steps.

var data = ['a', 'b', 'c', 'd', 'e'];
    var html='';
    
    for (let i = 0; i < data.length; i += 2){
        html += `<div class="row">\n`;
        if (i < data.length - 1){
            html += `<div class="left">${data[i]}</div>\n`;
            html += `<div class="right">${data[i+1]}</div>\n`;
        }else if (i = data.length - 1){
            html += `<div class="left">${data[i]}</div>\n`;
        }
        html += `</div>\n`;
        html+=`<div class="seperator"></div>\n`;
    }
    
    console.log(html);

edited Jan 10, 2022 at 16:32

answered Jan 10, 2022 at 16:27

GigaWarTrex

1454 bronze badges

1 Comment

user3872094 Over a year ago

Thanks for the solution and welcome to SO :-)

phuzi · Accepted Answer · 2022-01-10 16:31:37Z

1

The easiest way is to use CSS Grids

const data = ['a', 'b', 'c', 'd', 'e'];

const container = document.querySelector('#container');

for (const datum in data) {
  let div = document.createElement('div')
  div.innerText = datum;
  container.append(div);
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div id="container"></div>

answered Jan 10, 2022 at 16:31

phuzi

13.3k4 gold badges30 silver badges65 bronze badges

1 Comment

user3872094 Over a year ago

Thanks for this alternate solution buddy, But I'm not allowed to use the grids.

Collectives™ on Stack Overflow

Create a divs table using javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related