<!DOCTYPE html> <html> <head> <title>CREATE Material Design TABLE ON Click</title> <!-- Import Materialize CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Import Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <button class="btn" onclick="createTable()">CREATE Table</button> <div id="tableContainer"></div> <script> FUNCTION createTable() { var TABLE = document.createElement('table'); TABLE.setAttribute('id', 'myTable'); TABLE.classList.add('striped'); var thead = document.createElement('thead'); var tr = document.createElement('tr'); FOR (var i = 0; i < 3; i++) { var th = document.createElement('th'); th.appendChild(document.createTextNode('Header ' + (i + 1))); tr.appendChild(th); } thead.appendChild(tr); TABLE.appendChild(thead); var tbody = document.createElement('tbody'); FOR (var i = 0; i < 3; i++) { var tr = document.createElement('tr'); FOR (var j = 0; j < 3; j++) { var td = document.createElement('td'); td.setAttribute('contenteditable', 'true'); td.appendChild(document.createTextNode('Cell ' + (i + 1) + ',' + (j + 1))); tr.appendChild(td); } tbody.appendChild(tr); } TABLE.appendChild(tbody); document.getElementById('tableContainer').appendChild(TABLE); // Add a material design button var btn = document.createElement('button'); btn.classList.add('btn', 'waves-effect', 'waves-light'); btn.innerHTML = 'Save<i class="material-icons right">save</i>'; document.getElementById('tableContainer').appendChild(btn); } </script> <!-- Import Materialize JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>