js全选、Tab栏切换、简易评论与动态表格_js得tab后内容全选-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61706112/article/details/122906771

本文展示了如何使用JavaScript实现表格的全选功能，包括thead中的复选框控制tbody中所有行的选中状态，以及通过Tab切换实现的导航栏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. js全选

<!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 {
            margin: 100px auto;
        }
        thead {
            background-color: burlywood;
        }
        tbody {
            background-color: pink;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>商品</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>小熊玩具</td>
                <td>20</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>汉堡</td>
                <td>25</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>游戏</td>
                <td>150</td>
            </tr>
        </tbody>
    </table>

    <script>
        var chooseAll = document.querySelector('thead').querySelector('input');
        var goodChoose = document.querySelector('tbody').querySelectorAll('input');
        chooseAll.onclick = function() {
            for(var i = 0; i < goodChoose.length; ++i) {
                goodChoose[i].checked = this.checked;
            }
        }
        for(var i = 0; i < goodChoose.length; i++) {
            goodChoose[i].onclick = function() {
                var flag = true;
                for(var j = 0; j < goodChoose.length; j++) {
                    if(!goodChoose[j].checked) {
                        flag = false;
                    }
                }
                chooseAll.checked = flag;
            }
        }
    </script>
</body>
</html>

2. Tab栏切换

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 180px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .content {
            height: 100px;
            background-color: steelblue;
            border-top: 1px solid #000;
        }
        ul {
            list-style: none;
            cursor: pointer;
        }
        li {
            float: left;
            width: 60px;
            text-align: center;
            border-right: 1px solid #000;
            box-sizing: border-box;
        }
        li:last-child {
            border-right: 0;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .bg {
            background-color: tan;
        }
        .content div {
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top">
            <ul class="clearfix">
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
        </div>
        <div class="content">
            <div style="display: block;">这是tab1的内容</div>
            <div>这是tab2的内容</div>
            <div>这是tab3的内容</div>
        </div>
    </div>

    <script>
        var lis = document.querySelectorAll('li');
        var divs = document.querySelector('.content').querySelectorAll('div');
        for(var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index',i);
            lis[i].onclick = function() {
                for(var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'bg';
                for(var k = 0; k < lis.length; k++) {
                    divs[k].style.display = 'none';
                }
                divs[this.dataset.index].style.display = 'block';
            }
        }
    </script>
</body>
</html>

3. 简易评论

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto;
        }
        ul {
            list-style: none;
        }
        li {
            border-bottom: 1px solid #ccc;
        }
        li a {
            float: right;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        var txt = document.querySelector('textarea');
        btn.onclick = function() {
            if(txt.value == '') {
                alert('请输入内容');
                return false;
            }else {
                var li = document.createElement('li');
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>";
                ul.insertBefore(li,ul.children[0]);
            }
            txt.value = '';

            var a = document.querySelectorAll('a');
            for(var i = 0; i < a.length; i++) {
                a[i].onclick = function() {
                    ul.removeChild(this.parentNode);
                }
            }   
        }
    </script> 
</body>
</html>

4. 动态表格

<!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>动态生成表格</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        table {
            margin: 100px auto;
            text-align: center;
        }
        table td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>分数</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var arr = [
            {
                name:'张三',
                gender:'男',
                score:90
            },
            {
                name:'李四',
                gender:'女',
                score:93
            },
            {
                name:'王五',
                gender:'男',
                score:95
            }];
            var tbody = document.querySelector('tbody');
            for(var i = 0; i < arr.length; i++) {
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                for(var k in arr[i]) {
                    var td = document.createElement('td');
                    td.innerHTML = arr[i][k];
                    tr.appendChild(td);
                }
                var td = document.createElement('td');
                td.innerHTML = "<a href='javascript:;'>删除</a>";
                tr.appendChild(td);
            }

            var as = document.querySelectorAll('a');
            for(var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
    </script>
</body>
</html>