回到顶部按钮，表格渲染:

憨憨404

已于 2023-02-22 10:57:11 修改

阅读量127

点赞数

分类专栏：随笔Js 文章标签： javascript 前端

于 2022-12-11 13:57:12 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/128266838

版权

随笔Js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

回到顶部按钮:

<script>
        /* 
            让浏览器滚动到某一个位置。
            可以模拟一键回到顶部的效果
            语法：
                window.scrollTo(参数)
                参数写法一：
                    window.scrollTo(x,y)
                    你写的第一个数字就代表横向的位置
                    你写的第二个数字就代表纵向的位置
                    注意：2个数字，横向位置和纵向位置都必须写，并且没有平滑的滑动效果
                参数写法二：
                    window.scrollTo({left:XXX,top:XXX,behavior:'smooth'})
                        动横向就写left
                        动纵向就写top
                        2个都想操作left和top都写
                        并且可以添加平滑滑动的效果’
                        behavior:'smooth':平滑效果
        */

        // var btn = document.getElementById('btn')
        // btn.onclick = function(){
        //     window.scrollTo(0,0)
        // }


        var btn = document.getElementById('btn')
        btn.onclick = function(){
            window.scrollTo({left:0,top:0,behavior:'smooth'})
        }
    </script>

表格渲染两种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 600px;
            height: 400px;
            border-collapse: collapse;
            text-align: center;
        }
        td{
            border: 1px solid red;
            
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>班级</td>
        </tr>
    </table>
    <script src="./dom6.js"></script>
    <script>
        var userInfo = [
            { id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2219' },
            { id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2219' },
            { id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2219' },
            { id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2219' },
            { id: 5, name: 'Tom', age: 24, gender: '男', classRoom: '2219' },
            { id: 6, name: 'Tom', age: 24, gender: '男', classRoom: '2219' },
            { id: 6, name: 'Tom', age: 24, gender: '男', classRoom: '2219' },
            { id: 6, name: 'Tom', age: 24, gender: '男', classRoom: '2219' },
        ]

        var tbodyEle = document.querySelector('tbody')
        var str = ``
        for (let i = 0; i < userInfo.length; i++) {
            str += `
                <tr>
                    <td>${userInfo[i].id}</td>
                    <td>${userInfo[i].name}</td>
                    <td>${userInfo[i].age}</td>
                    <td>${userInfo[i].gender}</td>
                    <td>${userInfo[i].classRoom}</td>
                </tr>
            `
        }
        tbodyEle.innerHTML += str







        
        // // table 自带 tbody,获取tbody
        // var tbodyEle = document.querySelector('tbody')
        // // 创建一个 字符串，用于拼接内容
        // var str = ``
        // // 对接口 userInfo进行循环，得到对象 i 
        // for (let i = 0; i < userInfo.length; i++) {
        //     // console.log(userInfo[i])
        //     // 创建的字符串拼接，因为for循环在里边。所以拼接tr标签分开写（for循环嵌套里边），这样可以达到换行的作用，
        //     str +=`<tr>`
        //         // 对对象进行遍历，得到数据，拼接进str
        //         for (var j  in userInfo[i]) {
        //         // console.log(userInfo[i][j])            
        //         str += `<td>${userInfo[i][j]}</td>`
        //         }
        //     str +=`</tr>`
        // }
        // // 获取的tbody拼接进内容，把str拼接好的导入
        // tbodyEle.innerHTML += str

    </script>
</body>
</html>