JSFiddle - React, Tailwind, and code Playground

by gokulmaha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

<div class="container">             
  <table class="table">
    <thead>
      <tr>
        <th>sno</th> 
        <th>action</th>
      </tr>
    </thead>
    <tbody id="tbdy">
 <tr>
   <td>#</td>
 <td class='action'>action</td>
 </tr>
    </tbody>
  </table>
</div>
  <button id="addColumn" type="button" class="btn btn-default">Add Column</button>
  <button id="addRow" type="button" class="btn btn-primary">Add Row</button>

JavaScript

$("#addColumn").on('click',function(){ 
        var n = 2017 + $(".table thead th.year").length;
 $("tr").find("th:last").before('<th class="year">'+n+'</th> ');
 
 
addColumn()
    })
     $("#addRow").on('click',function(){ 
     
 
  
    })
    function addColumn(){
          $("#tbdy tr").each(function(){
    	  var thcount = $(".table thead th").length;
   			var tdCount = $(this).find("td").length
        
        if(thcount != tdCount ){
        $(this).find('.action').before("<td><input type='text' /></td>")
        }
    })
    }
    
    function addRows(){    
    var html = "<tr><td>#</td>";
    for(i=0;i<$(".table thead th.year").length;i++){
    html+= "<td><input type='text' /></td>"
    }
      html+= "<td class='action'>action</td></tr>"
    $("#tbdy").prepend(html)
    
    $("#tbdy tr").each(function(){
    	  var thcount = $(".table thead th").length;
   			var tdCount = $(this).find("td").length
        
        if(thcount != tdCount ){
        $(this).find('.action').before("<td><input type='text' /></td>")
        }
    })
    }