html+css+js+jquery实现在网页端将手动输入用户的信息转化成表格

繁星日月

已于 2024-04-26 21:01:13 修改

阅读量371

点赞数 8

文章标签： css javascript html jquery jquery事件的使用

于 2024-04-26 20:59:03 首次发布

本文链接：https://blog.csdn.net/m0_65810417/article/details/138229932

版权

1.实现的效果图

2.css代码


 <style>
       *{
            background-color: antiquewhite;
        }
        #ss{
            font-size:20px;
            text-align: center;
        }
        #inputForm {  
        margin-bottom: 20px;  
        }  
    
         #userTable {  
        width: 100%;  
        border-collapse: collapse;  
        }  
    
         #userTable th, #userTable td {  
        border: 1px solid black;  
        padding: 8px;  
        text-align: left;  
        }  
    
         #userTable .delete-btn {  
        text-align: center;  
        cursor: pointer;  
        }
    </style>

3.js+jquert代码

注意：在使用js的时候要引入js资源：https://code.jquery.com/jquery-3.6.0.min.js

<script>
        $(document).ready(function() {  
            $('#submitBtn').click(function() {  
                var number=$('#number').val();
                var name = $('#name').val();  
                var age = $('#age').val();  
                var sex = $('#sex').val();  
                var account = $('#account').val();  
                var password = $('#password').val();  
                var email = $('#email').val();  

                if (number && name && age && sex && account && password && email) {  
                    var row = $('<tr></tr>');  
                    row.append('<td class="select-btn"><input type="checkbox"></td>');
                    row.append('<td>' + number + '</td>');  
                    row.append('<td>' + name + '</td>');  
                    row.append('<td>' + age + '</td>');  
                    row.append('<td>' + sex + '</td>');  
                    row.append('<td>' + account + '</td>');  
                    row.append('<td>' + password + '</td>');  
                    row.append('<td>' + email + '</td>');  
                    row.append('<td class="delete-btn">删除</td>');  
                    $('#userTable tbody').append(row);  

                    // 为新添加的行的删除按钮绑定点击事件  
                    row.find('.delete-btn').click(function() {  
                        $(this).closest('tr').remove(); // 删除当前行  
                    });  

                    // 清空输入框以便输入新的用户信息  
                    $('#number').val('');  
                    $('#name').val('');  
                    $('#age').val('');  
                    $('#sex').val('');  
                    $('#account').val('');  
                    $('#password').val('');  
                    $('#email').val('');  
                } else {  
                    alert('请填写所有字段！');  
                }  
            }); 
            
                // 批量删除所选事件
                $('#delSel').click(function(){
                    $('#userTable tbody input[type="checkbox"]:checked').each(function() {
                    $(this).closest('tr').remove(); // 删除选中的行
                });
             });
        });

        // 实现全选事件
        function selectAllRows(checkbox) {
            var rows = document.querySelectorAll('#userTable tbody input[type="checkbox"]');
            for (var i = 0; i < rows.length; i++) {
                rows[i].checked = checkbox.checked;
            }
        }
        
    </script>

4.全部代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>用户信息表格</title>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
       *{
            background-color: antiquewhite;
        }
        #ss{
            font-size:20px;
            text-align: center;
        }
        #inputForm {  
        margin-bottom: 20px;  
        }  
    
         #userTable {  
        width: 100%;  
        border-collapse: collapse;  
        }  
    
         #userTable th, #userTable td {  
        border: 1px solid black;  
        padding: 8px;  
        text-align: left;  
        }  
    
         #userTable .delete-btn {  
        text-align: center;  
        cursor: pointer;  
        }
    </style>
</head>  
<body>  
    <span id="ss">用户信息表格</span>
    <div id="inputForm">  
        <label for="number">编号:</label>
        <input type="number" name="number" id="number"><br><br>
        <label for="name">姓名:</label>  
        <input type="text" id="name" name="name"><br><br>  
        <label for="age">年龄:</label>  
        <input type="number" id="age" name="age"><br><br>  
        <label for="text">性别:
                <select name="sex" id="sex">
                    <option>男</option>
                    <option>女</option>
                </select>
        </label><br><br>
        <label for="text">账号:</label> 
        <input type="text" id="account" name="account"><br><br>  
        <label for="text">密码:</label>  
        <input type="text" id="password" name="password"><br><br>  
        <label for="email">邮箱:</label>  
        <input type="email" id="email" name="email"><br><br>  
        <button id="submitBtn">提交</button>  
        <button id="delSel">删除所选</button>  
    </div>  
    
    <table id="userTable">  
        <thead>  
            <tr>  
                <th><input type="checkbox" onclick="selectAllRows(this)" name="chk" id="chk">全选</th>
                <th>编号</th>
                <th>姓名</th>  
                <th>年龄</th>  
                <th>性别</th>  
                <th>账号</th>  
                <th>密码</th>  
                <th>邮箱</th>  
                <th>操作</th>  
            </tr>  
        </thead>  
        <tbody id="input">  
            <!-- 用户信息将在这里动态生成 -->  
        </tbody>  
    </table>  

    <script>
        $(document).ready(function() {  
            $('#submitBtn').click(function() {  
                var number=$('#number').val();
                var name = $('#name').val();  
                var age = $('#age').val();  
                var sex = $('#sex').val();  
                var account = $('#account').val();  
                var password = $('#password').val();  
                var email = $('#email').val();  

                if (number && name && age && sex && account && password && email) {  
                    var row = $('<tr></tr>');  
                    row.append('<td class="select-btn"><input type="checkbox"></td>');
                    row.append('<td>' + number + '</td>');  
                    row.append('<td>' + name + '</td>');  
                    row.append('<td>' + age + '</td>');  
                    row.append('<td>' + sex + '</td>');  
                    row.append('<td>' + account + '</td>');  
                    row.append('<td>' + password + '</td>');  
                    row.append('<td>' + email + '</td>');  
                    row.append('<td class="delete-btn">删除</td>');  
                    $('#userTable tbody').append(row);  

                    // 为新添加的行的删除按钮绑定点击事件  
                    row.find('.delete-btn').click(function() {  
                        $(this).closest('tr').remove(); // 删除当前行  
                    });  

                    // 清空输入框以便输入新的用户信息  
                    $('#number').val('');  
                    $('#name').val('');  
                    $('#age').val('');  
                    $('#sex').val('');  
                    $('#account').val('');  
                    $('#password').val('');  
                    $('#email').val('');  
                } else {  
                    alert('请填写所有字段！');  
                }  
            }); 
            
                // 批量删除所选事件
                $('#delSel').click(function(){
                    $('#userTable tbody input[type="checkbox"]:checked').each(function() {
                    $(this).closest('tr').remove(); // 删除选中的行
                });
             });
        });

        // 实现全选事件
        function selectAllRows(checkbox) {
            var rows = document.querySelectorAll('#userTable tbody input[type="checkbox"]');
            for (var i = 0; i < rows.length; i++) {
                rows[i].checked = checkbox.checked;
            }
        }
        
    </script>
</body>  
</html>

以上就是此次分享的内容，希望可以对大家有用！！！！！

繁星日月

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html+css+js+jquery实现在网页端将手动输入用户的信息转化成表格

注意：在使用js的时候要引入js资源：https://code.jquery.com/jquery-3.6.0.min.js。以上就是此次分享的内容，希望可以对大家有用！
复制链接

扫一扫