用HTML和Javascript编写一个可在线编辑并存储表格的网页_js table 在线编辑

作者：花生_TL007 | 2024-02-13 13:40:29

踩

js table 在线编辑

1. 界面

原始界面：

原始界面

编辑界面：

2. 写代码时参考的教程

JavaScript BookList App | No Frameworks
Allowing users to edit text content with html5
W3School content editable

3. 我的代码：HTML Part

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 使用Bootstrap flatly主题 -->
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
    <title>Table Editor</title>
</head>
<!-- 检验是否有本地存储 -->
<body onload="checkEdits()">
    <div class="container">
        <div class="mt-5 container d-flex justify-content-between align-items-cente">
            <button class="btn btn-warning" onclick="edit(this);">Enable Edit</button>      
            <button class="btn btn-info" onclick="addRow();">Add Row</button>
        </div>
        <div class="container mt-4" id="edit">
            <div class="display-4 text-center"><h1 id="edit">Table Editor</h1></div>
            <table class="table table-striped mt-5">
              	<!-- 表格只有四列 -->
                <thead class="table-primary"><tr><th>Column</th><th>Column</th><th>Column</th><th></th></tr></thead>
                <tbody id="rows"></tbody>
            </table>
        </div>
    </div>
    <script src="table.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4. 我的代码：JS Part

function showAlert(message, className) {
    const div = document.createElement('div');
    div.className = `mt-2 alert alert-${className}`;
    div.appendChild(document.createTextNode(message));
    const container = document.querySelector('.container');
    const form = document.querySelector('#edit');
    container.insertBefore(div, form);
    // Vanish in 3 seconds
    setTimeout(() => document.querySelector('.alert').remove(), 3000);
}

function edit(button) {
    const x = document.getElementById("edit");
    if (x.contentEditable == "true") {
        x.contentEditable = "false";
        localStorage.table = x.innerHTML;
        showAlert("Edits saved!", 'success');
        button.innerHTML = "Enable Edit";
    } else {
      x.contentEditable = "true";
      button.innerHTML = "Save";
    }
}

function addRow() {
    const list = document.getElementById("rows");
    const row = document.createElement('tr');
    row.innerHTML = `
    <td></td><td></td><td></td>
    <td><button class="btn btn-danger btn-sm" οnclick="deleteRow(this);">X</button></td>
  `;
    list.appendChild(row);
}

function deleteRow(button) {
      button.parentElement.parentElement.remove();
}

function checkEdits() {
    //find out if the user has previously saved edits
    if (localStorage.table!=null) {
        document.getElementById("edit").innerHTML = localStorage.table;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/80132