根据输入，添加删除表单里面的数据

最新推荐文章于 2024-06-13 14:30:24 发布
最新推荐文章于 2024-06-13 14:30:24 发布
阅读量86 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/makabaka12138/article/details/125696840
版权 
<!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{
            width: 80%;
        }
    </style>
</head>
<body>
        <div>
            <form action="" method="dialog">
            姓名: <input type="text"> <br>
            年龄: <input type="text"> <br>
            性别: <input type="text"> <br>
            <input type="submit" onclick = "addrow()">
            </form>
        </div><br>
        <table border="1" class="mytable" id="table">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>微笑</td>
                <td>18</td>
                <td>男</td>       
                <td><a href="javascript:;" onclick="deletethisrow(this)">删除</a></td>         
            </tr>
            <tr>
                <td>陈慧亭</td>
                <td>18</td>
                <td>男</td>       
                <td><a href="javascript:;" onclick="deletethisrow(this)">删除</a></td>         
            </tr>
            <tr>
                <td>陈慧亭</td>
                <td>18</td>
                <td>男</td>       
                <td><a href="javascript:;" onclick="deletethisrow(this)">删除</a></td>         
            </tr>
            <tr>
                <td>陈慧亭</td>
                <td>18</td>
                <td>男</td>       
                <td><a href="javascript:;" onclick="deletethisrow(this)">删除</a></td>         
            </tr>
            <tr>
                <td>陈慧亭</td>
                <td>18</td>
                <td>男</td>       
                <td><a href="javascript:;" onclick="deletethisrow(this)">删除</a></td>         
            </tr>
        </table>
       <script>
                function deletethisrow(obj){
                var gettable = document.querySelector('table').lastChild;
                var last = obj.parentNode.parentNode;
                gettable.removeChild(last);
            }

                function addrow(obj){
                    var tbody = document.getElementById('table').lastChild;  
                    var tr = document.createElement('tr');  
                    var sz1 = document.getElementsByTagName('input')[0].value;
                    var sz2 = document.getElementsByTagName('input')[1].value;
                    var sz3 = document.getElementsByTagName('input')[2].value;
                    
                    var td = document.createElement("td");
                    td.innerHTML = sz1;
                    tr.appendChild(td);
                    
                    td = document.createElement("td");     
                    td.innerHTML = sz2;
                    tr.appendChild(td);
                    
                    td = document.createElement('td');
                    td.innerHTML = sz3;
                    tr.appendChild(td);

                    td = document.createElement("td");    
                    td.innerHTML = "<a href=javascript:; onclick=deletethisrow(this)>删除</a>";
                    tr.appendChild(td);
                    
                    tbody.appendChild(tr);
                }
        </script>
</body>
</html>

makabaka12138
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于React实现表单数据的添加和删除详解
12-08
在输入框中输入数据后，点击保存按钮，数据将会逐一显示在输入框下方，点击保存后显示的任何一条数据，该数据即可被删除。 实现思路 在开始实现之前，我们需要理清我们的思路，这样才能更好地去完成预定功能。 点击...
vue实现点击添加按钮添加一行input框，点击删除则删除input框，至少保留一行无法删除
dengsijieee的博客
03-27 1754
点击增加人员按钮实现增加一行可输入姓名和手机号的输入框，点击删除则删除对应的那行输入框，至少存在一行 不能删除
Angular将填入表单的数据渲染到表格的方法
01-19
在X坐标和Y坐标文本框输入信息，然后点击添加，就会在下面表格 中出现一项相应的数据，点击每一项旁边的删除按钮，该条信息就会被删除！ 因为我们的表格数据是经常刷新的，所以我们把它独立出来作为一个组件。 二、...
vue动态表格添加删除数据特效代码
03-20
vue动态表格添加删除数据代码是一款输入用户名和年龄自由添加用户信息表格，可以删除用户信息，支持批量全部删除表格数据代码。
jquery 列表动态添加输入
07-04
对表单进行复制 同时可以根据输入内容添加后动态生成 HelperTable.Copy.run({ defaultData:data,//加载的数据 tableElement:"#rowContent",//列表容器 indexField:'id',//指定唯一标识 数据唯一标识...
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
11-21
横向添加 是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题 而纵向添加的数据，因为没有事先在 el-select v-modle=”” 里面定义好字段，定义好的option是通过v-for出来的(option是...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 353
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 516
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1293
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 547
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue CLI 4与项目构建实战指南
06-09 925
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 443
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1243
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
前端工程化：基于Vue.js 3.0的设计与实践
weixin_44976692的博客
06-08 4554
本书由程沛权倾力撰写，基于其多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章。从前端工程化的基础开始，到TypeScript的深入学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程，帮助读者在前端工程化领域不断提升实战能力。程沛权，养了三只猫的程序员，热爱烹饪、设计和音乐。在前端领域有多年的开发经验和一线开发团队管理经验。
vue2中如何使用函数式组件
JackZhouMine
06-08 1043
vue 在 render 函数的第二个参数中提供了context，用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象，即 h 的第二个参数。listeners: 组件上监听的事件对象，在组件上监听 ` event-name ` ，listeners 对象就有 ` event-name ` 属性，值为函数，数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数，返回了包含所有插槽的对象。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 596
Vue在表单校验中trigger属性指定何时触发校验规则
Ethereum-Score-Hella怎么使用，举例说明
ZJQ的博客
06-09 50
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得。
vue3 防止按钮的连续点击（连点）
最新发布
MtangEr的博客
06-13 263
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
vue3 element form动态表单添加删除 包含校验
06-03
// 表单校验通过，提交表单数据 } else { // 表单校验不通过 } }) } } ``` 4. 在表单校验规则中使用动态绑定的方式，例如： ``` data() { return { formRules: {} } }, watch: { formItems: { handler...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值