<!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>