Mục lục

Với sự kết hợp giữa html css js bạn có thể tạo ra modal thật đẹp bên dưới là ý tưởng và code mẫu

Tạo cho tôi 1 modal có chức năng hiển thị ra 1 danh sách request và thời gian request cũng như thời gian hoàn thành hiển thị dạng table, có message lỗi nếu request đó đồng bộ thất bại và message thành công đó thành công và danh sách gồm 20 api bằng html css javascript giao diện thật đẹp và linh hoạt, tiếng việt

Bên dưới là áp dụng vào thực tế

Tạo Modal Hiển Thị bảng dạng section mới nhất 2024

Dưới đây là một ví dụ về mã HTML, CSS và JavaScript để tạo một modal hiển thị danh sách các yêu cầu API với thời gian yêu cầu, thời gian hoàn thành và thông báo lỗi hoặc thành công.
Giao diện sẽ hiển thị dưới dạng bảng và bao gồm 20 API.

HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách yêu cầu API</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModal">Hiển thị danh sách yêu cầu</button>

    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>Danh sách yêu cầu API</h2>
            <table id="requestTable">
                <thead>
                    <tr>
                        <th>API</th>
                        <th>Thời gian yêu cầu</th>
                        <th>Thời gian hoàn thành</th>
                        <th>Trạng thái</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Các dòng dữ liệu sẽ được thêm vào đây -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 20px;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalopen 0.4s;
}

@keyframes modalopen {
    from {opacity: 0;}
    to {opacity: 1;}
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.success {
    color: green;
}

.error {
    color: red;
}

JavaScript (scripts.js):

document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'block';
    loadRequestData();
});

document.querySelector('.close-button').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('modal')) {
        document.getElementById('modal').style.display = 'none';
    }
});

function loadRequestData() {
    const requests = [
        {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', status: 'success'},
        {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', status: 'error'},
        // Thêm 18 yêu cầu khác...
    ];

    const tableBody = document.querySelector('#requestTable tbody');
    tableBody.innerHTML = '';

    requests.forEach(request => {
        const row = document.createElement('tr');

        const apiCell = document.createElement('td');
        apiCell.textContent = request.api;
        row.appendChild(apiCell);

        const requestTimeCell = document.createElement('td');
        requestTimeCell.textContent = request.requestTime;
        row.appendChild(requestTimeCell);

        const completionTimeCell = document.createElement('td');
        completionTimeCell.textContent = request.completionTime;
        row.appendChild(completionTimeCell);

        const statusCell = document.createElement('td');
        statusCell.textContent = request.status === 'success' ? 'Thành công' : 'Thất bại';
        statusCell.className = request.status === 'success' ? 'success' : 'error';
        row.appendChild(statusCell);

        tableBody.appendChild(row);
    });
}

Hướng dẫn sử dụng:

Tạo ba file: index.html, styles.css, và scripts.js.
Sao chép mã HTML, CSS và JavaScript ở trên vào các file tương ứng.
Mở file index.html trong trình duyệt để xem kết quả.

Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các yêu cầu API, thời gian yêu cầu, thời gian hoàn thành và trạng thái của từng yêu cầu.
Bạn có thể tùy chỉnh danh sách requests trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.

Thêm vào bảng số lượng sản phẩm và button sync lại

Dưới đây là phiên bản cập nhật của mã HTML, CSS và JavaScript để thêm số lượng sản phẩm và nút “Đồng bộ lại” vào bảng hiển thị yêu cầu API.

HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách yêu cầu API</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModal">Hiển thị danh sách yêu cầu</button>

    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>Danh sách yêu cầu API</h2>
            <table id="requestTable">
                <thead>
                    <tr>
                        <th>API</th>
                        <th>Thời gian yêu cầu</th>
                        <th>Thời gian hoàn thành</th>
                        <th>Số lượng sản phẩm</th>
                        <th>Trạng thái</th>
                        <th>Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Các dòng dữ liệu sẽ được thêm vào đây -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 20px;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalopen 0.4s;
}

@keyframes modalopen {
    from {opacity: 0;}
    to {opacity: 1;}
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.success {
    color: green;
}

.error {
    color: red;
}

.sync-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.sync-button:hover {
    background-color: #0056b3;
}

JavaScript (scripts.js):

document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'block';
    loadRequestData();
});

document.querySelector('.close-button').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('modal')) {
        document.getElementById('modal').style.display = 'none';
    }
});

function loadRequestData() {
    const requests = [
        {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', productQuantity: 5, status: 'success'},
        {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', productQuantity: 3, status: 'error'},
        // Thêm 18 yêu cầu khác...
    ];

    const tableBody = document.querySelector('#requestTable tbody');
    tableBody.innerHTML = '';

    requests.forEach((request, index) => {
        const row = document.createElement('tr');

        const apiCell = document.createElement('td');
        apiCell.textContent = request.api;
        row.appendChild(apiCell);

        const requestTimeCell = document.createElement('td');
        requestTimeCell.textContent = request.requestTime;
        row.appendChild(requestTimeCell);

        const completionTimeCell = document.createElement('td');
        completionTimeCell.textContent = request.completionTime;
        row.appendChild(completionTimeCell);

        const productQuantityCell = document.createElement('td');
        productQuantityCell.textContent = request.productQuantity;
        row.appendChild(productQuantityCell);

        const statusCell = document.createElement('td');
        statusCell.textContent = request.status === 'success' ? 'Thành công' : 'Thất bại';
        statusCell.className = request.status === 'success' ? 'success' : 'error';
        row.appendChild(statusCell);

        const actionCell = document.createElement('td');
        const syncButton = document.createElement('button');
        syncButton.textContent = 'Đồng bộ lại';
        syncButton.className = 'sync-button';
        syncButton.addEventListener('click', function() {
            syncRequest(index);
        });
        actionCell.appendChild(syncButton);
        row.appendChild(actionCell);

        tableBody.appendChild(row);
    });
}

function syncRequest(index) {
    // Logic đồng bộ lại yêu cầu API tại đây
    alert('Đang đồng bộ lại yêu cầu thứ ' + (index + 1));
}

Hướng dẫn sử dụng:

Cập nhật các file index.html, styles.css, và scripts.js như mã ở trên.
Mở file index.html trong trình duyệt để xem kết quả.

Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các yêu cầu API, thời gian yêu cầu, thời gian hoàn thành, số lượng sản phẩm, trạng thái của từng yêu cầu và nút “Đồng bộ lại” cho mỗi yêu cầu.
Bạn có thể tùy chỉnh danh sách requests trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.
Nút “Đồng bộ lại” hiện chỉ hiển thị thông báo, bạn có thể thay thế bằng logic đồng bộ thực tế.

Giờ tôi muốn hiển thị bảng dạng session 1 session là 1 batch với 1 batch của tôi gồm nhiều item

Để hiển thị bảng dưới dạng session, trong đó mỗi session là một batch gồm nhiều item, bạn có thể tổ chức dữ liệu theo cấu trúc lồng nhau và điều chỉnh giao diện để phản ánh cấu trúc này.
Dưới đây là ví dụ về cách bạn có thể thực hiện điều này.

HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách yêu cầu API</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModal">Hiển thị danh sách yêu cầu</button>

    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>Danh sách yêu cầu API</h2>
            <div id="sessionsContainer">
                <!-- Các session sẽ được thêm vào đây -->
            </div>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 20px;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalopen 0.4s;
}

@keyframes modalopen {
    from {opacity: 0;}
    to {opacity: 1;}
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.session {
    margin-bottom: 20px;
}

.session h3 {
    margin-top: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.success {
    color: green;
}

.error {
    color: red;
}

.sync-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.sync-button:hover {
    background-color: #0056b3;
}

JavaScript (scripts.js):

document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'block';
    loadSessionData();
});

document.querySelector('.close-button').addEventListener('click', function() {
    document.getElementById('modal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('modal')) {
        document.getElementById('modal').style.display = 'none';
    }
});

function loadSessionData() {
    const sessions = [
        {
            sessionName: 'Session 1',
            items: [
                {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', productQuantity: 5, status: 'success'},
                {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', productQuantity: 3, status: 'error'}
            ]
        },
        {
            sessionName: 'Session 2',
            items: [
                {api: 'API 3', requestTime: '2024-07-08 10:04:00', completionTime: '2024-07-08 10:05:00', productQuantity: 8, status: 'success'},
                {api: 'API 4', requestTime: '2024-07-08 10:06:00', completionTime: '2024-07-08 10:07:00', productQuantity: 6, status: 'error'}
            ]
        }
        // Thêm các session khác...
    ];

    const sessionsContainer = document.getElementById('sessionsContainer');
    sessionsContainer.innerHTML = '';

    sessions.forEach((session, sessionIndex) => {
        const sessionDiv = document.createElement('div');
        sessionDiv.className = 'session';

        const sessionTitle = document.createElement('h3');
        sessionTitle.textContent = session.sessionName;
        sessionDiv.appendChild(sessionTitle);

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        thead.innerHTML = `
            <tr>
                <th>API</th>
                <th>Thời gian yêu cầu</th>
                <th>Thời gian hoàn thành</th>
                <th>Số lượng sản phẩm</th>
                <th>Trạng thái</th>
                <th>Hành động</th>
            </tr>
        `;
        table.appendChild(thead);

        const tbody = document.createElement('tbody');
        session.items.forEach((item, itemIndex) => {
            const row = document.createElement('tr');

            const apiCell = document.createElement('td');
            apiCell.textContent = item.api;
            row.appendChild(apiCell);

            const requestTimeCell = document.createElement('td');
            requestTimeCell.textContent = item.requestTime;
            row.appendChild(requestTimeCell);

            const completionTimeCell = document.createElement('td');
            completionTimeCell.textContent = item.completionTime;
            row.appendChild(completionTimeCell);

            const productQuantityCell = document.createElement('td');
            productQuantityCell.textContent = item.productQuantity;
            row.appendChild(productQuantityCell);

            const statusCell = document.createElement('td');
            statusCell.textContent = item.status === 'success' ? 'Thành công' : 'Thất bại';
            statusCell.className = item.status === 'success' ? 'success' : 'error';
            row.appendChild(statusCell);

            const actionCell = document.createElement('td');
            const syncButton = document.createElement('button');
            syncButton.textContent = 'Đồng bộ lại';
            syncButton.className = 'sync-button';
            syncButton.addEventListener('click', function() {
                syncRequest(sessionIndex, itemIndex);
            });
            actionCell.appendChild(syncButton);
            row.appendChild(actionCell);

            tbody.appendChild(row);
        });
        table.appendChild(tbody);

        sessionDiv.appendChild(table);
        sessionsContainer.appendChild(sessionDiv);
    });
}

function syncRequest(sessionIndex, itemIndex) {
    // Logic đồng bộ lại yêu cầu API tại đây
    alert('Đang đồng bộ lại yêu cầu thứ ' + (itemIndex + 1) + ' trong Session ' + (sessionIndex + 1));
}

Hướng dẫn sử dụng:

Cập nhật các file index.html, styles.css, và scripts.js như mã ở trên.
Mở file index.html trong trình duyệt để xem kết quả.

Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các session, mỗi session chứa nhiều yêu cầu API với thời gian yêu cầu, thời gian hoàn thành, số lượng sản phẩm, trạng thái của từng yêu cầu và nút “Đồng bộ lại” cho mỗi yêu cầu.
Bạn có thể tùy chỉnh danh sách sessions trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.
Nút “Đồng bộ lại” hiện chỉ hiển thị thông báo, bạn có thể thay thế bằng logic đồng bộ thực tế.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Bộ công cụ My Self: @tools.mtips5s.com

Github: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!

[ Better ] [ HTML ] [ CSS ] [ JS ] Tạo Modal Hiển Thị bảng dạng section mới nhất 2024

Prev Post

[ Better ] [ Python ] ...

Next Post

[ Better ] [ Docker ] ...

[ Better ] [ HTML ] [ CSS ] [ JS ] Tạo Modal Hiển Thị bảng dạng section mới nhất 2024

Mục lục

Tạo Modal Hiển Thị API

HTML:

CSS (styles.css):

JavaScript (scripts.js):

Hướng dẫn sử dụng:

Thêm vào bảng số lượng sản phẩm và button sync lại

HTML:

CSS (styles.css):

JavaScript (scripts.js):

Hướng dẫn sử dụng:

Giờ tôi muốn hiển thị bảng dạng session 1 session là 1 batch với 1 batch của tôi gồm nhiều item

HTML:

CSS (styles.css):

JavaScript (scripts.js):

Hướng dẫn sử dụng:

Tags:

Leave A Comment Cancel reply

Prev Post

[ Better ] [ Python ] ...

Next Post

[ Better ] [ Docker ] ...