Twoja wyszukiwarka
<!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">
<style>
/* Center the button */
#createTableBtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Move the button to the top left */
.top-left {
position: relative;
top: 0;
left: 0;
transform: none;
}
</style>
</head>
<body>
<button id="createTableBtn" class="btn" onclick="createTable()">Create Table</button>
<div id="tableContainer"></div>
<script>
function createTable() {
// Move the button to the top left
document.getElementById('createTableBtn').classList.add('top-left');
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.setAttribute('contenteditable', 'true');
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 search bar
var inputField = document.createElement('div');
inputField.classList.add('input-field');
var icon = document.createElement('i');
Odebrano wiadomość. My apologies for the confusion. Here is the full code that creates a table with editable headers, a search bar, and a CSV import button using HTML, JavaScript, and Materialize: ```html <!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"> <style> /* Center the button */ #createTableBtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Move the button to the top left */ .top-left { position: relative; top: 0; left: 0; transform: none; } </style> </head> <body> <button id="createTableBtn" class="btn" onclick="createTable()">Create Table</button> <div id="tableContainer"></div> <script> function createTable() { // Move the button to the top left document.getElementById('createTableBtn').classList.add('top-left'); 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.setAttribute('contenteditable', 'true'); 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 search bar var inputField = document.createElement('div'); inputField.classList.add('input-field'); var icon = document.createElement('i');
icon.classList.add('material-icons', 'prefix');
icon.innerHTML = 'search';
inputField.appendChild(icon);
var input = document.createElement('input');
input.setAttribute('id', 'search');
input.setAttribute('type', 'text');
inputField.appendChild(input);
var label = document.createElement('label');
label.setAttribute('for', 'search');
label.innerHTML = 'Search';
inputField.appendChild(label);
document.getElementById('tableContainer').appendChild(inputField);
// Add a CSV import button
var fileField = document.createElement('div');
fileField.classList.add('file-field', 'input-field');
var btn = document.createElement('div');
btn.classList.add('btn');
btn.innerHTML = '<span>File</span><input type="file">';
fileField.appendChild(btn);
var pathWrapper = document.createElement('div');
pathWrapper.classList.add('file-path-wrapper');
var filePath = document.createElement('input');
filePath.classList.add('file-path', 'validate');
filePath.setAttribute('type', 'text');
pathWrapper.appendChild(filePath);
fileField.appendChild(pathWrapper);
document.getElementById('tableContainer').appendChild(fileField);
}
</script>
<!-- Import Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This code adds a search bar and a CSV import button to the page using Materialize’s input-field, prefix, material-icons, file-field, btn, and file-path-wrapper classes.
You can further customize this code to suit your needs. For example, you can add functionality to the search bar to filter the table data or add a server-side script to handle the CSV import.
I hope this helps! Let me know if you have any questions. 😊
Odebrano wiadomość. Sure! Here is the rest of the code that creates a table with editable headers, a search bar, and a CSV import button using HTML, JavaScript, and Materialize: ```html icon.classList.add('material-icons', 'prefix'); icon.innerHTML = 'search'; inputField.appendChild(icon); var input = document.createElement('input'); input.setAttribute('id', 'search'); input.setAttribute('type', 'text'); inputField.appendChild(input); var label = document.createElement('label'); label.setAttribute('for', 'search'); label.innerHTML = 'Search'; inputField.appendChild(label); document.getElementById('tableContainer').appendChild(inputField); // Add a CSV import button var fileField = document.createElement('div'); fileField.classList.add('file-field', 'input-field'); var btn = document.createElement('div'); btn.classList.add('btn'); btn.innerHTML = '<span>File</span><input type="file">'; fileField.appendChild(btn); var pathWrapper = document.createElement('div'); pathWrapper.classList.add('file-path-wrapper'); var filePath = document.createElement('input'); filePath.classList.add('file-path', 'validate'); filePath.setAttribute('type', 'text'); pathWrapper.appendChild(filePath); fileField.appendChild(pathWrapper); document.getElementById('tableContainer').appendChild(fileField); } </script> <!-- Import Materialize JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html> ``` This code adds a search bar and a CSV import button to the page using Materialize's `input-field`, `prefix`, `material-icons`, `file-field`, `btn`, and `file-path-wrapper` classes. You can further customize this code to suit your needs. For example, you can add functionality to the search bar to filter the table data or add a server-side script to handle the CSV import. I hope this helps! Let me know if you have any questions. 😊