Adding rows and columns on button clicks bootstrap

Question

I have a requirement where the user should be able to add the rows and columns dynamically in bootstrap table. On button click a new row and an other button click a new columns should appear.

Similarly on button click of '-', the row needs to be deleted and an other button click, column needs to be deleted.

I am new to bootstrap 3. Any guidance will be of great help!!

Answer 1

You can use jquery to do that, here's a simple example : https://jsfiddle.net/1okx6pja/ Html :

<button onclick='add()'>
  add
</button>
<table>
  <tr>
    <th>content</th>
    <th>delete</th>
  </tr>
  <tbody>
    <tr>
      <td>Something</td>
      <td>
        <button onclick='rm()'>
          remove
        </button>
      </td>
    </tr>
  </tbody>
</table>

javascript :

function rm() {
  $(event.target).closest("tr").remove();
}

function add() {
  $("table").append("<tr><td>New Thing</td><td><button onclick='rm()'>remove</button></td></tr>");
}

if you don't understand something feel free to ask