表单验证table表格添加数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script src="js/jquery-1.11.1.js"></script>
        <script>
            
            function chan(){
                $("#cityz").siblings().remove();
                
                var shi=[["西二旗","海淀区"],["承德市","邯郸市"]];
                var sheng=$("#sheng").val();
                var city=$("#city");
                for (var i=0;i<shi[sheng].length;i++) {
                    city.append("<option>"+shi[sheng][i]+"</option>");
                }
            }
            
            function add () {
                var uname=$("#uname").val();
                var sex=$("#sex option:selected").text();
                var bir=$("#bir").val();
                var sheng=$("#sheng option:selected").text();
                var city=$("#city option:selected").val();
                if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") {
                    alert("输入信息有误!");
                } else{
                    $("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button οnclick=\"del(this)\">删除</button></td></tr>");
                }
            }
            
            function del(e){
                e.parentNode.parentNode.remove();
            }
            
            function delall(){
                var checks=$(":checked[name=ck]");
                if (checks.length==0) {
                    alert("请至少选择一条删除!");
                    return;
                }
                
                for(var i in checks){
                    checks[i].parentNode.parentNode.remove();
                }
            }
            
            function xuan(e){
                var ckss=$("input[name=ck]");
                for (var i in ckss) {
                    ckss[i].checked=e.checked;
                }
            }
            
            function xuanall(){
                var ckss=$("input[name=ck]")
                for(var i in ckss) {
                    if (ckss[i].checked==false) {
                        ckss[i].checked=true;
                    } else{
                        ckss[i].checked=false;
                    }
                }
            }
        </script>
    </head>
    
    <body>
        
        姓名:<input id="uname" />
        性别:<select id="sex"><option>男</option><option>女</option></select>
        生日:<input id="bir" type="date" />
        住址:<select id="sheng" οnchange="chan()">
                <option>请选择</option>
                <option value="0">北京</option>
                <option value="1">河北</option>
             </select>
            
             <select id="city">
                 <option id="cityz">请选择</option>
             </select><br />
            
        <button οnclick="add()">添加</button>
        <button οnclick="xuanall()">全选/反选</button>
        <button οnclick="delall()">批量删除</button>
        
        <table width="400" cellspacing="0" border="1">
            <tr style="background-color: #999999;">
                <th><input type="checkbox" id="cks" οnchange="xuan(this)"/></th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>住址</th>
                <th>删除 </th>
            </tr>
            
        </table>
    </body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您需要一个网页,其中包含登录添加数据和显示数据表格。首先,您需要使用 HTML 和 CSS 创建一个网页布局。然后,使用 JavaScript 编写代码来实现的功能和数据显示。以下是一个简的示例代码: HTML 代码: ```html <!DOCTYPE html> <html> <head> <title>示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>登录</h1> <form id="login-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> <h1>添加数据</h1> <form id="add-data-form"> <label for="name">名称:</label> <input type="text" id="name" name="name" required> <label for="age">年龄:</label> <input type="number" id="age" name="age" required> <input type="submit" value="添加"> </form> <h1>数据表格</h1> <table id="data-table"> <thead> <tr> <th>名称</th> <th>年龄</th> </tr> </thead> <tbody> <!-- 数据将通过 JavaScript 动态添加到此处 --> </tbody> </table> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ```css .container { max-width: 800px; margin: 0 auto; padding: 20px; } h1 { margin-top: 40px; margin-bottom: 20px; } form { margin-bottom: 40px; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"], input[type="number"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } table { border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #ddd; } ``` JavaScript 代码: ```js const loginForm = document.getElementById('login-form'); const addDataForm = document.getElementById('add-data-form'); const dataTable = document.getElementById('data-table').getElementsByTagName('tbody')[0]; // 模拟登录验证 loginForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止提交 const username = event.target.elements.username.value; const password = event.target.elements.password.value; if (username === 'admin' && password === 'password') { alert('登录成功!'); } else { alert('用户名或密码错误!'); } }); // 添加数据 addDataForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止提交 const name = event.target.elements.name.value; const age = event.target.elements.age.value; const row = dataTable.insertRow(); row.insertCell().appendChild(document.createTextNode(name)); row.insertCell().appendChild(document.createTextNode(age)); }); // 动态添加示例数据 const data = [ {name: '张三', age: 20}, {name: '李四', age: 25}, {name: '王五', age: 30}, ]; for (let i = 0; i < data.length; i++) { const row = dataTable.insertRow(); row.insertCell().appendChild(document.createTextNode(data[i].name)); row.insertCell().appendChild(document.createTextNode(data[i].age)); } ``` 这个示例代码实现了一个简数据表格功能。当用户提交登录时,会进行简的用户名和密码验证。当用户提交添加数据时,会将数据动态添加数据表格中。您可以根据自己的需求修改和扩展这个示例代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值