案例：当点击按钮“评论一下”时，将输入的昵称和评论内容添加到上面的表格中。效果如下所示，向文本框输入以下内容

该博客展示了如何使用JavaScript实现HTML表格动态添加行以及评论功能。此外，还详细解释了如何为复选框实现全选、反选和取消全选的功能，涉及事件监听和DOM操作。

<!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>
</head>

<body>
    <form action="">
        <table border="1">
            <tbody>
                <tr id="tr">
                    <td>猪猪</td>
                    <td>我喜欢吃肉</td>
                </tr>
            </tbody>
        </table>
    </form>
    昵称<input type="text" placeholder="妮儿" id="text"><br>
    <textarea name="" id="textarea" cols="30" rows="10"></textarea>
    <input type="button" id="button" value="评论一下">
    <script>
        // 先索引到 全部的按钮 和table 里面的 tr td
        var button = document.querySelector("#button")
        var textarea = document.querySelector("#textarea")
        var text = document.querySelector("#text")
        var table = document.querySelector("table")
        button.onclick = function () {
            // 创建节点
            var tr = document.createElement("tr")
            // 在table上面添加节点
            table.appendChild(tr)
            // 创建节点
            var td1 = document.createElement("td")
            // 添加节点的value
            td1.innerHTML = text.value
            tr.appendChild(td1)
            
            var td2 = document.createElement("td") //创建节点
            td2.innerHTML = textarea.value
            tr.appendChild(td2)//添加节点
        }
    </script>
</body>

</html>

全选和反选

<!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>
        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <input type="checkbox" name="box1" id="box1">全选
    <input type="button" value="取消全选" id="quxiao">
    <input type="button" value="反选" name="box2" id="box2">
    <hr>
    <ul>
        <li><input type="checkbox" name="" id="">铁血丹心</li>
        <li><input type="checkbox" name="" id="">火</li>
        <li><input type="checkbox" name="" id="">大海</li>
        <li><input type="checkbox" name="" id="">好汉歌</li>
    </ul>
    <script>
        // 先索引到 全部的按钮 和 渲染全部的ul li 里面的 input
        var box1 = document.querySelector("#box1")
        var box2 = document.querySelector("#box2")
        var input = document.querySelectorAll("ul li input")
        var quxiao = document.querySelector("#quxiao")
        // console.log(li)
        // 全选
        box1.onclick = function () {
            // console.log(box1.checked)
            for (var i = 0; i < input.length; i++) {
                input[i].checked = box1.checked  //循环到 全部input的 选中他的checked 让他和 全选按钮
            }

        }
        for (var m = 0; m < input.length; m++) {
            // console.log(input[m])
            input[m].onclick = function () {  //给 全部的input添加onclick事件 
                var cont = 0 //定义一个 0用来添加li里面状态时 checked是true 就 cont++
                for (var j = 0; j < input.length; j++) {
                    if (input[j].checked == true) {
                        cont++
                    }

                }
                if (cont == input.length) { //如果和 input字符串长度相同时 就让全选按钮选中 否则就是 false
                    box1.checked = true
                } else {
                    box1.checked = false
                }
            }
        }
        // 反选
        box2.onclick = function () {
            // 定义一个 0用来添加li里面状态时 checked是true 就 cont++
            var qf = 0
            for (var i = 0; i < input.length; i++) {
                //给他的状态都取反 
                if (input[i].checked) {
                    input[i].checked = false
                } else {
                    input[i].checked = true
                    qf++
                }
                //如果和 input字符串长度相同时 就让全选按钮选中 否则就是 false
                if (qf == input.length) {
                    box1.checked = true
                } else {
                    box1.checked = false
                }
            }
        }
        //取消全选
        quxiao.onclick = function () {
            for (var i = 0; i < input.length; i++) { //循环去到全部的 li里面的input的状态和 全选按钮当时的状态 点击直接修改成flase
                if (box1.checked == true || input[i].checked == true) {
                    box1.checked = false
                    input[i].checked = false
                }
            }
        }
    </script>
</body>

</html>