CODEWITHSUNDEEP
javascriptcsshtml
kadina
kadina

Reputation: 5382

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

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?

Upvotes: 1

Views: 4512

Answers (2)

Saeed
Saeed

Reputation: 5488

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>

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

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>

Upvotes: 1

Related Questions