Dynamically add row & columns bootstrap table

dynamically-add-row-columns-bootstrap-table.markdown

Dynamically add row & columns bootstrap table

A Pen by Carla on CodePen.

License.

index.html

<table id="table" class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row_0">
      <th id="head_0"scope="row"></th>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  
  </tbody>
</table>
<div class="container bg-light">
  <div class="form-group">
    <input  type="text" id="userData" class="form-control" id="months" placeholder="Months" value"">
  </div>
  <input type="submit" onclick="letsAdd()" class="btn btn-primary center">
</div>
<!--   <input type="submit"  id="btn" onclick="newRownAdd()" class="btn btn-primary center"> -->
 <div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto"> 

script.js

function letsAdd(){
  // newRowAdd();
 addTableData();
  
}

var row_nr = 0;
var col_nr = 0;

function addTableData() {
    var table = document.getElementById("table");
    //get row and check index
    var row = document.getElementById("row_" + row_nr);
    // insert column
    var cell = row.insertCell(col_nr);
    //retrive user input
    var userData = document.getElementById("userData").value;
    //add row&column index plus user data
    cell.innerHTML = row_nr + "," + col_nr + " > " + userData;
    col_nr++;
    if (col_nr % 4 == 0) {
        col_nr = 0;
        row_nr++;
        var row = table.insertRow(row_nr);
        row.setAttribute("id", "row_" + row_nr);
    }

}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />