How to add buttons dynamically in grid format (rows and columns) using javascript?

Question

I need to display the buttons dynamically in a row (with small space between buttons) based on the response from one server. If the buttons cross the screen, need to display the buttons in the next row. I thought of using table as below.

<!DOCTYPE html>
<html>

<head>
  <style>
    td {
      width: 200px;
      height: 200px;
    }
    
    button {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <p>Table with cellspacing:</p>
  <table cellspacing="50">
    <tr>
      <td><button id='b1' onclick='clickbt("b2")'>Month</button></td>
      <td><button id='b2' onclick='clickbt("b3")'>Savings</button></td>
    </tr>
    <tr>
      <td><button id='b3' onclick='clickbt("b4")'>January</button></td>
      <td><button id='b4' onclick='clickbt("b1")'>$100</button></td>
    </tr>
  </table>

  <script>
    function clickbt(id) {
      document.getElementById(id).focus();
    }
  </script>
</body>

Even though the code is creating buttons, I am hardcoding it two buttons per row and I am hardcoding columns as 2. But as I need to create the buttons dynamically based on the response from the server, Is there any solution using javascript instead of static rows and columns in html?

You might have JSON as the response from the server, can you add the sample of the response you are getting? — Mamun
– Mamun, Commented May 23, 2018 at 3:16
@Mamun: Response will be nothing but list of recordings. Based on the number of recordings, I need to display the buttons. — kadina
– kadina, Commented May 23, 2018 at 3:25
I'm not a frontend guy, but I think it might be easier to use <ul><li> instead of the table and css ul li { list-style: none;display: inline-block;} — Resley Rodrigues
– Resley Rodrigues, Commented May 23, 2018 at 4:02

Gerardo BLANCO · Accepted Answer · 2018-05-23 04:25:57Z

You can use JS and CSS to solve your problem.

With JS you can create and append any amount of elements you need. I made a small snippet to mock this. The var buttonsToGenerate should be replaced dynamically based on the response from the your server

With CSS you can use flexbox layout to make a more dynamic and most important, responsive layout

Hope this helps :)

function generate(){
  let buttonsToGenerate = Math.floor(Math.random() * (3)) + 1;
  for(let i = 0; i < buttonsToGenerate; i++){
    var btn = document.createElement("button");        
    var t = document.createTextNode("button text");       
    btn.appendChild(t);                                
    document.getElementById('button-holder').appendChild(btn);                    
  }
}

p {
  display: inline;
}

p + button {
  width: auto;
  height: auto;
}
button {
    width: 200px;
    height: 200px;
}

#button-holder {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  justify-content: space-between;
}

<!DOCTYPE html>

<body>

<p>This will generate buttons between 1 - 5 per click:</p><button onclick="generate()">RUN</button> 
<div id="button-holder"></div>
<script>

</script>
</body>

Saeed · Accepted Answer · 2018-05-24 15:00:31Z

1

This is an example of creating dynamic buttons for a table. In this example you set number of buttons and number of buttons on each row.

var buttonNum = 10,
  w = window.innerWidth,
  rowButtonNumber = Math.floor(w / 200);

var table = document.getElementById("myTable");

for (var i = 0; i < buttonNum; i++) {
  var tr = document.createElement("tr");
  table.appendChild(tr);
  for (var j = 0; j < rowButtonNumber; j++, i++) {
    var td = document.createElement("td");
    var btn = document.createElement("button");
    btn.innerHTML = "btn " + (i + 1);
    btn.id = "btn-" + i;
    btn.onclick = function () { alert(this.innerHTML); };
    if (i >= buttonNum) {
      break;
    } else {
      td.appendChild(btn);
      tr.appendChild(td);
    }
  }
  i--;
}

<html>

<head>
  <style>
    td {
      width: 200px;
      height: 200px;
    }
    
    button {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <p>Table with cellspacing:</p>
  <table id="myTable" cellspacing="50">
  </table>

  <script>
    function clickbt(id) {
      document.getElementById(id).focus();
    }
  </script>
</body>

edited May 24, 2018 at 15:00

answered May 23, 2018 at 4:40

Saeed

5,4983 gold badges30 silver badges43 bronze badges

2 Comments

kadina Over a year ago

We shouldn't define the number of buttons in a row as we don't know the screen width.

Saeed Over a year ago

Yes, But we can find the width of screen and divide that by 200 and get the number of buttons on each row. btw good to solve your question @kadina

Collectives™ on Stack Overflow

How to add buttons dynamically in grid format (rows and columns) using javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related