大佬勿进!原生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(); // 重新渲染表格
            }
        }
相关推荐
熊的猫28 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel