表单验证table表格添加数据

最新推荐文章于 2024-04-30 14:45:25 发布
最新推荐文章于 2024-04-30 14:45:25 发布
阅读量2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sui_yz/article/details/78995763
版权
<!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>
sui_yz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table中加表单元素怎么验证_el-table树形表格表单验证(列表生成序号)
weixin_42132056的博客
02-04 633
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做curd，因此需要每次列表的item增加或减少时重新调用生成索引的方法。setindex = (data) => {let queue = [...data];let loop = 0;while (queue...
jquery - 定义二维数组
weixin_30784501的博客
08-06 5474
var products = []; products.push({product_id: '1',count: 3},{product_id:'2',count: 6}) 转载于:https://www.cnblogs.com/nyfz/p/9430722.html
el-table表格编辑时输入校验
最新发布
LoveHaixin的博客
04-30 688
2.点击输入框输入，点击某一个字段，即正在输入状态，这个字段的校验结果就会被清除（clearValidate）1.不输入数据，直接点击“提交”触发校验，由于数据没有输入，校验不通过，给出校验提示。4.校验通过，显示全屏提示是否提交，点击“确定”即可，控制台会打印“校验通过。2.由于每行都需要校验，因此需要借助scope.$index。外层嵌套一层el-form，使用el-form的校验机制。3.数据都填好之后，点击“提交”，再次触发校验。1.需要借助el-form的校验，
jqkill:找到对jQuery的所有引用以便于删除
05-12
JQKill 快速定位，定位并报告对jQuery的每次调用以消除。 像liner一样工作，但专门用于jQuery。 用法 争论 jqkill [pattern] -i [pattern] -r [path] [pattern] -文件匹配器模式（默认**/*.js ） -i | --ignore忽略匹配器模式（默认**/node_modules/** ） -r | --root从中运行测试的根路径（默认为process.cwd() ） 基本用法 使用默认值 jqkill 高级用法 指定自定义参数 jqkill " **/*.js " -i " **/lib/** " -r ../kuma/ 注意：在Linux / OSX中，匹配器模式必须用引号引起来。
删除html中所有的脚本,如何使用JQuery删除HTML字符串中的所有“脚本”标记？
weixin_30388691的博客
06-14 249
这应该适合你：var stringOfHtml = // your string here$(stringOfHtml).find('script').remove();要删除删除了脚本标记的新字符串：var stringOfHtml = "var html = $(stringOfHtml);html.find('script').remove();var stringWithoutScript...
table中加表单元素怎么验证_在table表格中如何进行表单验证
weixin_39634438的博客
12-18 1065
:data="form.items"borderclass="table":header-cell-style="{background:'#eef1f6',color:'#606266'}">:label="$t('lang.thenEwOrder.headers.ChineseName')"min-width="160">label-width="0":prop="'items.'...
vue实现form表单与table表格的数据关联功能示例
10-17
在Vue.js中，实现表单（form）与...总的来说，Vue.js的`v-model`、`v-for`、事件监听（`@click`）以及数组操作是实现表单与表格数据关联的关键。通过理解这些核心概念，开发者可以构建出动态且交互丰富的Web应用程序。
el-table树形表格表单验证(列表生成序号)
10-15
生成树形列表的序号是为了便于在表单验证中定位特定行数据，尤其是在进行添加、删除或修改操作时。以下是一个用于生成序号的函数`setIndex`： ```javascript setIndex = (data) => { let queue = [...data]; let ...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
在处理动态表单验证时，除了基本的`required`规则外，还可以添加其他验证规则，如`maxLength`、`minLength`、`pattern`等，以满足不同场景的需求。此外，还可以自定义验证规则，通过在`rules`对象中定义一个函数，该...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行验证。 4. 动态添加和删除操作： 在实际应用中，往往需要支持用户在表单中动态添加或删除字段。Vue的数组操作方法（如push、...
在vue中使用rules对表单字段进行验证
热门推荐
我的博客
01-08 11万+
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item labe...
elementui form中嵌套table并校验的各种情况的解决方案
ly2983068126的博客
07-09 5563
在WEUI的基础上，添加自定义组件和模板。欢迎大家提出疑问
表单嵌套表格实例
LIYICHENG00的博客
07-17 494
【代码】表单嵌套表格实例。
elementui笔记：el-table表格的输入校验
安之ccy的博客
03-01 1万+
elementui笔记：借用el-form的校验，给el-table的每行数据做校验
element-ui 给el-table添加校验；给表单嵌套对象添加校验
ingenuou_的博客
05-30 7628
element-ui 给el-table添加校验；给表单嵌套对象添加校验
element UI form table 表单以及验证
lchmyhua88的博客
12-18 1640
在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，但是这种都是官方的组件就可以实现，但是有时候我们需要表格的这种形式，那么使用原生的就不行了，下面我们来看一下这种的form table使用：
记一次使用ElementUi框架给Form中的Table添加表单验证
u011523825的博客
10-19 3691
给el-table加表单验证，一个很简单的需求。预计开发十分钟，结果用了2个半小时。vue代码写的太少了，很多隐藏的坑自己还发现不了。慢慢积累吧。
原生js实现表单前端校验
三个和尚_的博客
12-08 1232
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;注册页面&amp;lt;/title&amp;gt; &amp;lt;script&amp
el-table内表单校验
qq_36712606的博客
06-29 3519
el-table单元格校验
需要登录表单.添加数据表单.显示数据表格
04-29
好的，您需要一个网页，其中包含登录表单、添加数据表单和显示数据表格。首先，您需要使用 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、付费专栏及课程。

余额充值