如何正确将CodePen代码复制到VS Code并解决运行异常问题

算力阿峰

2026-7-29

考勤系统本地运行问题排查与修复

核心问题总结

本地运行失效主要源于HTML语法错误、资源依赖缺失、CSS类名不匹配、DOM加载顺序错误这四类问题，逐一修复即可恢复正常功能。

具体错误修复步骤

1. HTML语法与结构修正

闭合link标签：将 <link rel="stylesheet" href="style.css" 修改为 <link rel="stylesheet" href="style.css">

修正td的错误放置：将.holder内的<td>Un/check All</td>改为普通文本（td必须嵌套在表格的tr中），示例：

<div class="holder">
  <span>Un/check All</span>
  <div class="attendance">
    <input type="checkbox" id="checkAll"/>
    <span></span>
  </div>
</div>

调整Add Row按钮位置：将按钮移到表格外部，避免破坏表格结构
修复无效标签：将 <td class="missed-col">0</td><type="checkbox"></td> 修改为 <td class="missed-col">0</td><td><input type="checkbox"></td>
调整script加载顺序并引入jQuery：在</body>前添加jQuery引用和本地script，确保DOM加载完成后执行JS：
```
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
```

2. CSS类名统一

将CSS中的.Attend-col类名改为.attend-col（与HTML中的类名一致），确保样式正常应用：

th.attend-col {
    background-color: #f00;
}

td.attend-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
}

3. JavaScript逻辑适配

无需修改JS代码，但需确保jQuery已正确引入，且script标签在body末尾加载，避免DOM未就绪时执行代码。

修正后的完整代码示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Attendance System</title>
</head>
<body>
    <div class="mistyrose"></div>
    <h1>Attendance</h1>
    
    <label for="start">Start month:</label>
    <input type="month" id="start" name="start" min="2018-03" value="2018-05">
    
    <div class="holder">
        <span>Un/check All</span>
        <div class="attendance">
            <input type="checkbox" id="checkAll"/>
            <span></span>
        </div>
    </div>

    <input type="button" value="Add Row" onclick="addRow('dataTable')">
    
    <table id="dataTable" width="350px" border="1">
        <thead>
            <tr>
                <th class="name-col">Name</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10</th>
                <th>11</th>
                <th>12</th>
                <th>13</th>
                <th>14</th>
                <th>15</th>
                <th>16</th>
                <th>17</th>
                <th>18</th>
                <th>19</th>
                <th>20</th>
                <th>21</th>
                <th>22</th>
                <th>23</th>
                <th>24</th>
                <th>25</th>
                <th>26</th>
                <th>27</th>
                <th>28</th>
                <th>29</th>
                <th>30</th>
                <th>31</th>
                <th class="missed-col">Days Missed</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody>
            <tr class="visitor">
                <td class="name-col"><input type="text" placeholder="Your name"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="attend-col"><input type="checkbox"></td>
                <td class="missed-col">0</td>
                <td><input type="checkbox"></td>
                <td><input type="button" value="(Delete)"></td>
            </tr>
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    line-height: 1.9;
    margin: 2em;
    min-width: 1100px;
}

th {
    background-color: #001f3f;
    color: #fff;
    padding: 1em 1.3em;
}

td {
    border-top: 5px solid #eee;
    padding: 0.5em 1em;
}

input {
    cursor: pointer;
}

th.missed-col {
    background-color: #f00;
}

th.attend-col {
    background-color: #f00;
}

td.attend-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
}

.name-col {
    text-align: left;
    min-width: 11rem;
}

td.missed-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
}

input::placeholder {
    font-weight: bold;
    opacity: .5;
    color: black;
}

.mistyrose {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background-image: linear-gradient(
        216deg,
        rgba(77, 77, 77, 0.05) 0%,
        rgba(77, 77, 77, 0.05) 25%,
        rgba(42, 42, 42, 0.05) 25%,
        rgba(42, 42, 42, 0.05) 38%,
        rgba(223, 223, 223, 0.05) 38%,
        rgba(223, 223, 223, 0.05) 75%,
        rgba(36, 36, 36, 0.05) 75%,
        rgba(36, 36, 36, 0.05) 100%
      ),
      linear-gradient(
        44deg,
        rgba(128, 128, 128, 0.05) 0%,
        rgba(128, 128, 128, 0.05) 34%,
        rgba(212, 212, 212, 0.05) 34%,
        rgba(212, 212, 212, 0.05) 57%,
        rgba(25, 25, 25, 0.05) 57%,
        rgba(25, 25, 25, 0.05) 89%,
        rgba(135, 135, 135, 0.05) 89%,
        rgba(135, 135, 135, 0.05) 100%
      ),
      linear-gradient(
        241deg,
        rgba(55, 55, 55, 0.05) 0%,
        rgba(55, 55, 55, 0.05) 14%,
        rgba(209, 209, 209, 0.05) 14%,
        rgba(209, 209, 209, 0.05) 60%,
        rgba(245, 245, 245, 0.05) 60%,
        rgba(245, 245, 245, 0.05) 69%,
        rgba(164, 164, 164, 0.05) 69%,
        rgba(164, 164, 164, 0.05) 100%
      ),
      linear-gradient(
        249deg,
        rgba(248, 248, 248, 0.05) 0%,
        rgba(248, 248, 248, 0.05) 32%,
        rgba(148, 148, 148, 0.05) 32%,
        rgba(148, 148, 148, 0.05) 35%,
        rgba(202, 202, 202, 0.05) 35%,
        rgba(202, 202, 202, 0.05) 51%,
        rgba(181, 181, 181, 0.05) 51%,
        rgba(181, 181, 181, 0.05) 100%
      ),
      linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225));
    z-index: -6;
}

script.js

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

运行验证

将三个文件放在同一目录下，命名为index.html、style.css、script.js
在VS Code中安装Live Server插件，右键点击index.html选择「Open with Live Server」
页面即可正常显示并实现所有功能，与CodePen效果一致

内容的提问来源于stack exchange，提问作者Jose renzo

如何正确将CodePen代码复制到VS Code并解决运行异常问题

核心问题总结 #

具体错误修复步骤 #

1. HTML语法与结构修正 #

2. CSS类名统一 #

3. JavaScript逻辑适配 #

修正后的完整代码示例 #

index.html #

style.css #

script.js #

运行验证 #