Kashub's Code Barn - "djdhdhebeb"

podświetlone jako ini (dodał(a) jdudjdbej @ 2023-03-27 08:46:53)

Twoja wyszukiwarka
Parcel ABC
Podświetl ten kod w:
Ostatnio dodane:
Losowe wpisy:
<!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. 😊
| Wózki dla dzieci | | Sklep z artykułami dla zwierząt | | Programista Trójmiasto | | Skracacz linków | | Darmowe Blogi | | Kody programów | | Skracacz adresów | | Gnieżdżewo | | Opisy na Facebooka | | Pionowe opisy |