html+css+javascript实现学习计划表

html+css+javascript实现学习计划表（包含增删改查）

预览图
在这里插入图片描述
源代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习进度表</title>

    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2c3e50;
        }

        .box {
            width: 90%;
            max-width: 1100px;
            margin: 30px auto;
            padding: 50px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 30px;
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            font-size: 3em;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            font-weight: 700;
            letter-spacing: 2px;
            position: relative;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
            border-radius: 2px;
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 8px;
            margin-top: 30px;
        }

        th {
            background: linear-gradient(120deg, #2c3e50, #3498db);
            color: white;
            font-weight: 600;
            font-size: 1.1em;
            letter-spacing: 1px;
            padding: 20px;
            text-transform: uppercase;
        }

        th:first-child {
            border-radius: 15px 0 0 15px;
        }

        th:last-child {
            border-radius: 0 15px 15px 0;
        }

        td {
            background: white;
            padding: 20px;
            font-size: 1.05em;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        tr:not(:first-child) {
            margin-bottom: 10px;
        }

        tr:not(:first-child) td:first-child {
            border-radius: 15px 0 0 15px;
        }

        tr:not(:first-child) td:last-child {
            border-radius: 0 15px 15px 0;
        }

        tr:hover td {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .add, .del {
            padding: 15px 35px;
            border: none;
            border-radius: 30px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .add {
            background: linear-gradient(120deg, #4CAF50, #8BC34A);
            color: white;
            margin: 30px 0;
            font-size: 16px;
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .add:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
        }

        .del {
            background: linear-gradient(120deg, #FF5252, #FF1744);
            color: white;
            padding: 10px 25px;
            font-size: 14px;
        }

        .del:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 82, 82, 0.4);
        }

        .footer {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            background: linear-gradient(120deg, #f6f9fc 0%, #f1f4f8 100%);
            border-radius: 20px;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        label {
            font-weight: 600;
            color: #2c3e50;
            margin-right: 20px;
            font-size: 1.2em;
        }

        input[type="text"] {
            padding: 15px 25px;
            border: 2px solid #e0e0e0;
            border-radius: 30px;
            width: 350px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
            transform: translateY(-2px);
        }

        #searchResult {
            margin-top: 30px;
            padding: 25px;
            border-radius: 20px;
            background: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        #searchResult p {
            margin: 15px 0;
            padding: 20px;
            border-radius: 15px;
            background: #f8f9fa;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        #searchResult p:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            background: white;
        }

        td[contenteditable="true"]:focus {
            outline: 2px solid #3498db;
            border-radius: 8px;
            padding: 19px;
        }

        td:nth-child(3) {
            font-weight: 600;
        }

        td:nth-child(3)[contenteditable="true"]:empty:before {
            content: "点击编辑";
            color: #999;
            font-style: italic;
        }

        td:contains('进行中') {
            color: #2196f3;
        }

        td:contains('未开始') {
            color: #f44336;
        }

        td:contains('已完成') {
            color: #4caf50;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .box {
            animation: fadeIn 0.8s ease-out;
        }
    </style>


</head>
<body>
<div class="box">
    <h1>学习计划表</h1>
    <table id="progressTable">
        <tr>
            <th>日期</th>
            <th>学习内容</th>
            <th>完成情况</th>
            <th>操作</th>
        </tr>
        <tr contenteditable="true">
            <td>2024-03-06</td>
            <td>HTML基础</td>
            <td>进行中</td>
            <td><button class="del" onclick="deleteRow(this)">删除</button></td>
        </tr>
        <tr contenteditable="true">
            <td>2024-03-07</td>
            <td>CSS样式</td>
            <td>未开始</td>
            <td><button class="del" onclick="deleteRow(this)">删除</button></td>
        </tr>
        <tr contenteditable="true">
            <td>2024-03-08</td>
            <td>JavaScript入门</td>
            <td>未开始</td>
            <td><button class="del" onclick="deleteRow(this)">删除</button></td>
        </tr>
    </table>
    <br />

    <div class="footer">
        <button class="add" onclick="addRow()">添加学习计划</button>
        <br /><br />
        <label for="searchInput">搜索学习内容：</label>
        <input type="text" id="searchInput" onkeyup="search()" />
        <br /><br />
        <div id="searchResult"></div>
    </div>
</div>

<script>
    function addRow() {
        var table = document.getElementById("progressTable");
        var newRow = table.insertRow(-1);
        var cell1 = newRow.insertCell(0);
        var cell2 = newRow.insertCell(1);
        var cell3 = newRow.insertCell(2);
        var cell4 = newRow.insertCell(3);
        cell1.innerHTML = "新日期";
        cell2.innerHTML = "新学习内容";
        cell3.innerHTML = "未开始";
        cell4.innerHTML = '<button class="del" onclick="deleteRow(this)">删除</button>';
        newRow.setAttribute("contenteditable", "true");
    }

    function deleteRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

    function search() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("progressTable");
        tr = table.getElementsByTagName("tr");
        document.getElementById("searchResult").innerHTML = "";
        for (i = 1; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    document.getElementById("searchResult").innerHTML +=
                        "<p>" + tr[i].innerHTML + "</p>";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>