html实现表格的修改

原创已于 2024-10-07 19:31:48 修改 · 744 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-10-07 19:29:49 首次发布

学习专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
    <!--
    <link rel="stylesheet" href="styles/style.css" />
    -->
    <link rel="stylesheet" type="text/css" href="/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
    <script src="/bootstrap-5.3.3-dist/js/bootstrap.bundle.js"></script>
    <style>
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>

<body>
    <div>
        <div class="search-wrap">
            <input type="text" id="keyword" placeholder="请输入关键字">
            <input type="button" id="search" value="搜索" onclick="searchData()">
        </div>
        <div class="option-wrap">
            <input type="button" id="add" value="增加" onclick="addData()">
        </div>
        <div class="table-wrap">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr class="table-head">
                        <td>序号</td>
                        <td>标题</td>
                        <td>关键字</td>
                        <td>内容</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody id="content">
                    <script src="scripts/database.js"></script>
                </tbody>
            </table>
        </div>
        <dialog id="deleteDialog">
            <form method="dialog">
                <p>确认要删除吗？</p>
                <div class="confirm-bt">
                    <input type="button" id="deleteConfirm" value="确定">
                    <input type="button" id="deleteCancel" value="取消">
                </div>
            </form>
        </dialog>
        <div class="popup" id="popup">
            <form>
                <label>标题：</label>
                <input type="text" id="submitTitle" value="" placeholder="请输入标题" /><br><br>
                <label>内容：</label>
                <input type="text" id="submitContent" value="" placeholder="请输入内容" /><br><br>
                <div id="sumbitMsg"></div>
                <input type="button" id="submitConfirm" value="提交">
                <input type="button" id="submitCancel" value="取消">
            </form>
        </div>
    </div>
    <script src="scripts/operation.js" type="text/javascript"></script>
</body>

</html>

var database = [
    {
        'title': '电脑开不了机',
        'keywords': ['电脑', '电源', '故障'],
        'content': '电脑无法开机，则可能是电源故障、硬件故障或屏幕故障。如果设备无法启动至 Windows，则可能是硬件存在问题。'
    },
    {
        'title': '电脑蓝屏',
        'keywords': ['电脑', '蓝屏'],
        'content': '电脑蓝屏的话，尝试强制关机重启，看能否恢复，如果能进入恢复界面证明系统还能够恢复，无法进入则是bios启动程序出了问题，需要重装系统。'
    },
    {
        'title': '无法访问网页',
        'keywords': ['访问', '网页'],
        'content': '办公电脑默认是无法访问外网的，如果需要开通外网权限，需要在OA上提交外网权限开通申请单。'
    }
]

//查找数据
function searchData() {
    var keyword = document.getElementById('keyword').value;
    var container = document.querySelector('#content');
    content = '';
    i = 1;
    database.forEach(data => {
        if (data.title.includes(keyword) || data.keywords.indexOf(keyword) >= 0) {
            content = content + '<tr><td>' + i + '</td><td>' + data.title + '</td><td>' + data.keywords + '</td><td>' + data.content + '</td>'
            content = content + '<td>' + '<input type="button" id="modify" value="修改" οnclick="modifyData(this)">' +
                '<input type="button" id="delete" value="删除" οnclick="deleteData(this)">' + '</td></tr>'
            i++;
        }
    });
    container.innerHTML = content;
}


//删除数据
function deleteData(obj) {
    console.log('开始删除。。。')
    var delDialog = document.getElementById('deleteDialog');
    var delButton = document.querySelector('#deleteConfirm');
    var cancelButton = document.querySelector('#deleteCancel');

    if (typeof delDialog.showModal === "function") {
        delDialog.showModal();
        delButton.onclick = function () {
            console.log('确认删除');
            tdNode = obj.parentNode;
            trNode = tdNode.parentNode;
            tbNode = trNode.parentNode;
            tbNode.removeChild(trNode);
            delDialog.close();
            delTitle = trNode.cells[1].innerHTML; //获取删除行的title值
            //删除对应值元素
            database = database.filter(function (item) {
                return item.title !== delTitle;
            });
            searchData();
        }
        cancelButton.onclick = function () {
            console.log('取消删除');
            delDialog.close();
        }
    } else {
        delDialog.hidden = true;
    }
}

//添加数据
function addData() {
    const popup = document.getElementById("popup");
    const submitButton = document.querySelector("#submitConfirm");
    const cancelButton = document.querySelector("#submitCancel");
    const submintMsg = document.getElementById('sumbitMsg');
    const titleText = document.getElementById('submitTitle');
    const contentText = document.getElementById('submitContent');

    titleText.value = ""
    contentText.value = ""
    popup.style.display = 'block';  //将输入框设置为可见

    //监听提交
    submitButton.onclick = function () {
        console.log(titleText);
        console.log(contentText);
        //判断内容是否为空
        if (titleText.value == "" || contentText.value == "") {
            submintMsg.innerHTML = "标题或内容不能为空！"
        } else {
            database.push({
                'title': titleText.value,
                'keywords': ['班车', '路线'],
                'content': contentText.value
            })
            searchData();
            popup.style.display = 'none';
        }
    };

    cancelButton.onclick = function () {
        popup.style.display = 'none';
    };
}

//修改数据
function modifyData(obj) {
    const popup = document.getElementById("popup");
    const submitButton = document.querySelector("#submitConfirm");
    const cancelButton = document.querySelector("#submitCancel");
    const titleText = document.getElementById('submitTitle');
    const contentText = document.getElementById('submitContent');
    let trNode = obj.parentNode.parentNode;

    popup.style.display = 'block';  //将输入框设置为可见
    titleText.value = trNode.cells[1].innerHTML;
    contentText.value = trNode.cells[3].innerHTML

    submitButton.onclick = function () {
        database.forEach(data => {
            if (data.title == trNode.cells[1].innerHTML) {
                data.title = titleText.value;
                data.content = contentText.value;
                return;
            }
        });
        searchData();
        popup.style.display = 'none';
    }
    cancelButton.onclick = function () {
        popup.style.display = 'none';
    };
}

数据查询：

var container = document.querySelector('#content');
var content = '';
var i = 1;
database.forEach(data => {
    content = content + '<tr><td>' + i + '</td><td>' + data.title + '</td><td>' + data.keywords + '</td><td>' + data.content + '</td>'
    content = content + '<td>' + '<input type="button" id="modify" value="修改" οnclick="modifyData(this)">' + '<input type="button" id="delete" value="删除" οnclick="deleteData(this)">' + '</td></tr>'
    i++;
});

container.innerHTML = content;