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

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

Posted by: admin August 12, 2018 Leave a comment

Questions:

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>
Answers: