js-创建追加新节点来添加表格

最新推荐文章于 2022-11-05 17:26:31 发布

青丝不压头颅

最新推荐文章于 2022-11-05 17:26:31 发布

阅读量730

点赞数 1

分类专栏： JS部分文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_45630548/article/details/119962513

版权

JS部分专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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-top: 20px;
            width: 400px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            height: auto;
            display: none;
        }
        
        table tr td {
            width: 100px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>

</head>

<body>
    <!--  7.编码题：有一个班级有50个同学，现在要组织一个篮球赛，需要一个报名系统来记录参加报名的同学的名单。要求必须要记录姓名、年龄、身高、电话信息。用表格来显示名单，用表单来收集信息并添加到表格中。（选做，考点：逻辑思维，点击事件，新增节点，属性操作） -->
    <!-- 表单收集信息 -->
    <form id="stu_form" action="">
        <p>姓&emsp;名:<input type="text" name="name" id="name"></p>
        <p>年&emsp;龄:<input type="text" name="age" id="age"></p>
        <p>身&emsp;高:<input type="text" name="height" id="height"></p>
        <p>电&emsp;话:<input type="text" name="tel" id="tel"></p>
        <button type="button" id="sub_btn">添加学生</button>
        <button type="reset">再添加一个</button>
    </form>
    <table id="stu_info">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>身高</td>
            <td>电话</td>
        </tr>
    </table>
    <script>
        sub_btn.addEventListener('click', function() {
            let inputs = document.querySelectorAll('form input')
                // console.log(inputs)
                // 创建tr节点
            let tr_node = document.createElement('tr')

            for (let i = 0; i < inputs.length; i++) {
                // 创建td节点
                let td_node = document.createElement('td')
                if (inputs[i].value.length == 0) {
                    alert("请输入完整信息")
                    return false
                } else {
                    // 将值放进td节点中
                    td_node.innerHTML = inputs[i].value
                    console.log(td_node)

                    // 将td节点放在tr节点中
                    tr_node.appendChild(td_node)
                    console.log(tr_node)
                }
                // 将tr节点放在table中
                stu_info.appendChild(tr_node)

            }
            stu_info.style.display = 'block'
            return true
        })
    </script>

</body>

</html>

青丝不压头颅

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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>D.
复制链接

扫一扫