【无标题】

最新推荐文章于 2024-08-04 16:33:59 发布

毛小苇

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量377

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44657618/article/details/135964527

版权

本文详细介绍了如何在HTML中使用JavaScript创建一个简单的模态框，并通过fetchAPI从服务器获取数据，动态填充到模态框中的表格。展示了点击事件处理和数据展示的完整过程。

摘要由CSDN通过智能技术生成

个人学习

一个简单的Modal实现：
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框示例</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <button class="open-modal">打开模态框</button>
    <div class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <table id="dataTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>UUID</th>
                        <th>CreateDateTime</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>UUID1</td>
                        <td>2022-01-01</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>UUID2</td>
                        <td>2022-01-01</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="./js/app.js"></script>
</body>
</html>

js：

// scripts.js
document.querySelector('.open-modal').addEventListener('click', function () {
    document.querySelector('.modal').style.display = 'block';
});

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

// 点击模态框外部区域关闭模态框
window.addEventListener('click', function (event) {
    if (event.target == document.querySelector('.modal')) {
        document.querySelector('.modal').style.display = 'none';
    }
});


$(document).ready(function() {
    $('tr').click(function() {
        var uuid = $(this).find('td:nth-child(2)').text();
        myFunction(uuid);
    });
});

function myFunction(uuid) {
    // 在这里编写你的函数逻辑
    console.log("UUID: " + uuid);
}

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.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.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.5);
}
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.open-modal {
    background-color: #4CAF50;
    /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
}

.open-modal:hover {
    background-color: #45a049;
}

/* 表格样式 */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

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

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* 链接样式 */
td a {
    display: block;
    color: #007bff;
    text-decoration: none;
}

td a:hover {
    color: #0056b3;
    text-decoration: underline;
}

一个简单的modal中赋值的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>UUID</th>
                <th>CreateDateTime</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button id="openModal">Open</button>

    <script>
        document.getElementById('openModal').addEventListener('click', function() {
            fetch('http://your-api-url/data')
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
                    tableBody.innerHTML = '';
                    data.forEach(item => {
                        const row = document.createElement('tr');
                        row.addEventListener('click', function() {
                            myFunction(item.UUID);
                        });
                        const idCell = document.createElement('td');
                        idCell.textContent = item.ID;
                        const uuidCell = document.createElement('td');
                        uuidCell.textContent = item.UUID;
                        const dateTimeCell = document.createElement('td');
                        dateTimeCell.textContent = item.CreateDateTime;
                        row.appendChild(idCell);
                        row.appendChild(uuidCell);
                        row.appendChild(dateTimeCell);
                        tableBody.appendChild(row);
                    });
                })
                .catch(error => {
                    alert('Error fetching data: ' + error.message);
                });
        });

        function myFunction(uuid) {
            console.log('UUID: ' + uuid);
        }
    </script>
</body>
</html>