HTML页面模拟了一个类似Excel的表格在线diy修改表格内容

最新推荐文章于 2024-04-09 22:19:36 发布

PHP隔壁老王邻居

最新推荐文章于 2024-04-09 22:19:36 发布

阅读量1.9k

点赞数 10

分类专栏： php js html 文章标签： php 开发语言 html5 ajax

本文链接：https://blog.csdn.net/weixin_39934453/article/details/134344907

版权

php 同时被 3 个专栏收录

254 篇文章 7 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

html实现在线表格编辑，可以修改每个表格内容，并且可以添加行和列

这个HTML页面模拟了一个类似Excel的表格，可以添加和删除行和列，并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列，通过按钮可以删除最后一行和最后一列。每个单元格都可以通过直接点击并编辑来修改内容。

实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Excel-like Table</title>
    <style>
        table {
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }
        .addRow, .addColumn, .deleteRow, .deleteColumn {
            margin-bottom: 10px;
        }
        button {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div>
    <button class="addRow" onclick="addRow()">添加行</button>
    <button class="addColumn" onclick="addColumn()">添加列</button>
    <button class="deleteRow" onclick="deleteRow()">删除行</button>
    <button class="deleteColumn" onclick="deleteColumn()">删除列</button>
    <button class="saveData" onclick="saveData()">保存数据</button>
</div>
<table id="excelTable">
    <thead>
    <tr>
        <th contenteditable="true"></th>
        <th contenteditable="true">A</th>
        <th contenteditable="true">B</th>
        <th contenteditable="true">C</th>
        <th contenteditable="true">D</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th contenteditable="true">1</th>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
    </tr>
    <tr>
        <th contenteditable="true">2</th>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
    </tr>
    <tr>
        <th contenteditable="true">3</th>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
    </tr>
    <tr>
        <th contenteditable="true">4</th>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
    </tr>
    </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function addRow() {
        var table = document.getElementById("excelTable");
        var row = table.insertRow(-1);
        var rowIndex = table.rows.length - 2;
        var cell0 = row.insertCell(0);
        cell0.innerHTML = rowIndex;
        cell0.contentEditable = true;
        for (var i = 1; i < table.rows[1].cells.length; i++) {
            var cell = row.insertCell(i);
            cell.contentEditable = true;
        }
    }
    function addColumn() {
        var table = document.getElementById("excelTable");
        for (var i = 0; i < table.rows.length; i++) {
            var cell = table.rows[i].insertCell(-1);
            cell.contentEditable = true;
            if (i === 0) {
                var columnIndex = table.rows[i].cells.length - 2;
                cell.innerHTML = String.fromCharCode(65 + columnIndex);
                cell.contentEditable = true;
            }
        }
    }
    function deleteRow() {
        var table = document.getElementById("excelTable");
        if (table.rows.length > 2) {
            table.deleteRow(-1);
        }
    }
    function deleteColumn() {
        var table = document.getElementById("excelTable");
        if (table.rows[0].cells.length > 2) {
            for (var i = 0; i < table.rows.length; i++) {
                table.rows[i].deleteCell(-1);
            }
        }
    }
    function saveData() {
        var tableData = [];
        var table = document.getElementById("excelTable");
        var tableHeaders = [];
        for (var i = 0; i < table.rows[0].cells.length; i++) {
            tableHeaders.push(table.rows[0].cells[i].innerHTML);
        }
        tableData.push(tableHeaders);
        for (var i = 1; i < table.rows.length; i++) {
            var rowData = [];
            for (var j = 0; j < table.rows[i].cells.length; j++) {
                rowData.push(table.rows[i].cells[j].innerHTML);
            }
            tableData.push(rowData);
        }
        $.ajax({
            url: "test5.php",
            type: "POST",
            data: { tableData: JSON.stringify(tableData) },
            success: function(response) {
                alert("Data saved successfully!");
            }
        });
    }
</script>
</body>
</html>

使用ajax请求将这个数组传递给名为".php"的文件进行处理。注意，你需要自己创建一个".php"文件，并在其中编写相应的程序来保存数据。

PHP隔壁老王邻居

关注

10
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML页面模拟了一个类似Excel的表格在线diy修改表格内容

这个HTML页面模拟了一个类似Excel的表格，可以添加和删除行和列，并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列，通过按钮可以删除最后一行和最后一列。每个单元格都可以通过直接点击并编辑来修改内容。使用ajax请求将这个数组传递给名为".php"的文件进行处理。注意，你需要自己创建一个".php"文件，并在其中编写相应的程序来保存数据。html实现在线表格编辑，可以修改每个表格内容，并且可以添加行和列。
复制链接

扫一扫