大佬勿进!原生js快速实现todoList基础篇

前言

现在很多人用惯了框架但是却不习惯了写原生js的基础,这也是框架的弊端,特别在这种行情下,挺多越来越严苛的面试去筛选人,现在很多中小公司还会要求你去机试去实现一个todoList或者轮播图,对于应届生或者刚毕业的同学都会遇到的,老油条一般会觉得这公司不正经直接走嘿嘿,但是对于刚出来或者培训出来的同学每一次面试都是挑战和机遇,所以前几天有个刚培训出来的同学就遇到了这个问题,面试的公司要求半个小时内做出来,但是因为自己一直注重框架导致基础比较弱所以没做出来跟我吐槽了下哈哈哈,接下来我也简单实现了下,不知道的同学可以看看,老油条可以绕道。

演示

HTML

xml 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>表格示例</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <!-- 这里是虚拟数据行,你可以根据需要添加更多 -->
            <tr>
                <td>2023-10-13 10:00 ---- PM</td>
                <td>
                    <button onclick="moveUp(this)">上移</button>
                    <button onclick="moveDown(this)">下移</button>
                    <button onclick="moveToTop(this)">置顶</button>
                    <button onclick="moveToBottom(this)">置底</button>
                    <button onclick="removeRow(this)">删除</button>
                </td>
            </tr>
            <tr>
                <td>2023-10-13 02:30 ---- AM</td>
                <td>
                    <button onclick="moveUp(this)">上移</button>
                    <button onclick="moveDown(this)">下移</button>
                    <button onclick="moveToTop(this)">置顶</button>
                    <button onclick="moveToBottom(this)">置底</button>
                    <button onclick="removeRow(this)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <button onclick="addRow()">添加数据行</button>

    <script>
        var dataList = [
            { time: "2023-10-13 10:00 PM", operation: "示例操作1" },
            { time: "2023-10-13 02:30 AM", operation: "示例操作2" },
            // 添加更多数据行
        ];

        // 初始化表格
        function initializeTable() {
            var tableBody = document.getElementById("tableBody");
            tableBody.innerHTML = ""; // 清空表格内容

            dataList.forEach(function (data) {
                var newRow = document.createElement("tr");
                newRow.innerHTML = `
                    <td>${data.time}</td>
                    <td>
                        <button onclick="moveUp(this)">上移</button>
                        <button onclick="moveDown(this)">下移</button>
                        <button onclick="moveToTop(this)">置顶</button>
                        <button onclick="moveToBottom(this)">置底</button>
                        <button onclick="removeRow(this)">删除</button>
                    </td>
                `;
                tableBody.appendChild(newRow);
            });
        // console.log("🚀 ~ file: tabel.html:47 ~ dataList:", dataList)

        }
        // 添加行
        function addRow() {
            var newTime = getCurrentTime() + ' ---- ' + Math.round(Math.random() * 100 + 1);
            dataList.push({ time: newTime, operation: "新操作" });
            initializeTable(); // Re-render the table

        }        

        //移除行
        function removeRow(button) {
            // var row = button.closest("tr"); // 获取包含按钮的行//查找DOM树中最接近指定选择器的祖先元素
            var row = button.parentNode.parentNode; // 两次 parentNode 分别获取按钮的 <td> 元素和 <tr> 元素
            var rowIndex = row.rowIndex - 1; // 减1以考虑表头行
            console.log("🚀 ~ file: tabel.html:83 ~ removeRow ~ row:", row)
            
            if (rowIndex >0) {
                dataList.splice(rowIndex, 1); // 从数据列表中移除相应的数据
                console.log("🚀 ~ file: tabel.html:85 ~ removeRow ~ dataList:", dataList)
                initializeTable(); // 重新渲染表格
            }else{
                alert('行行好,再删除就没了')
            }
        }
        function getCurrentTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = (now.getMonth() + 1).toString().padStart(2, '0');
            var day = now.getDate().toString().padStart(2, '0');
            var hours = now.getHours().toString().padStart(2, '0');
            var minutes = now.getMinutes().toString().padStart(2, '0');
            var time = `${year}-${month}-${day} ${hours}:${minutes}`;
            return time;
        }
    </script>
</body>
</html>

上移

bash 复制代码
        //上移
        function moveUp(button) {
            var row = button.closest("tr"); // 找到包含按钮的行
            var rowIndex = row.rowIndex - 1; // 表格行索引(减1以考虑表头行)
            
            if (rowIndex > 0) { // 确保不是第一行
                // 交换当前行和上一行的数据
                var temp = dataList[rowIndex];
                dataList[rowIndex] = dataList[rowIndex - 1];
                dataList[rowIndex - 1] = temp;

                initializeTable(); // 重新渲染表格
            }else{
                alert('别再点了,已经是第一行了')
            }            
        }

下移

bash 复制代码
        // 下移
        function moveDown(button) {
            var row = button.closest("tr"); // 找到包含按钮的行
            var rowIndex = row.rowIndex - 1; // 表格行索引(减1以考虑表头行)

            if (rowIndex < dataList.length - 1) { // 确保不是最后一行
                // 交换当前行和下一行的数据
                var temp = dataList[rowIndex];
                dataList[rowIndex] = dataList[rowIndex + 1];
                dataList[rowIndex + 1] = temp;

                initializeTable(); // 重新渲染表格
            }else{
                alert('别再点了,已经是最后一行了')
            }    
        }

置顶

bash 复制代码
        //置顶
        function moveToTop(button) {
            var row = button.closest("tr"); // 找到包含按钮的行
            var rowIndex = row.rowIndex - 1; // 表格行索引(减1以考虑表头行)

            if (rowIndex > 0) { // 确保不是第一行
                // 将当前行数据移到数组的开头
                var movedRowData = dataList.splice(rowIndex, 1)[0];
                console.log("🚀 ~ file: tabel.html:135 ~ moveToTop ~ movedRowData:", movedRowData)
                dataList.unshift(movedRowData);

                initializeTable(); // 重新渲染表格
            }else{
                alert('行行好,已经是第一个了')
            }
        }

置底

bash 复制代码
        //置底
        function moveToBottom(button) {
            var row = button.closest("tr"); // 找到包含按钮的行
            var rowIndex = row.rowIndex - 1; // 表格行索引(减1以考虑表头行)

            if (rowIndex < dataList.length - 1) { // 确保不是最后一行
                // 将当前行数据移到数组的末尾
                var movedRowData = dataList.splice(rowIndex, 1)[0];
                dataList.push(movedRowData);

                initializeTable(); // 重新渲染表格
            }
        }
相关推荐
你的人类朋友9 分钟前
什么是断言?
前端·后端·安全
FIN66681 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4951 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1241 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树1 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66681 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER1 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰1 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化2 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染