js 简单实现表单数据的增添，单项删改，多项删除，修改以及全选功能

最新推荐文章于 2021-01-21 10:54:46 发布
VIP文章 最新推荐文章于 2021-01-21 10:54:46 发布
阅读量4.1k 收藏 9
点赞数 1
分类专栏： web前端技术 文章标签： javascript 表单操作 全选功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fickle_actor/article/details/77073146
版权 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//      添加商品函数
        function add(){
    
//          获取表单元素
            var table = document.getElementById("order");
//          以表单的行数为索引插入行
            var index = table.rows.length;
            var row = table.insertRow(index);

//          在插入行中插入1列
            var c0 = row.insertCell(0);

//          创建复选框元素并设置该元素的属性
            var c =document.createElement("input");
            c.setAttribute("type","checkbox");
            c.setAttribute("name","single");
            c.setAttribute("onclick","selectc()");

//          将创建好的复选框添加为插入列的最后一个子节点
            c0.appendChild(c);


//          在插入行中插入列并提示框输入值
            var c1 = row.insertCell(1);
            c1.innerHTML = prompt("请输入商品名称","");
            var c2 = row.insertCell(2);
            c2.innerHTML = prompt("请输入商品数量","");
            var c3 = row.insertCell(3);
            c3.innerHTML
最低0.47元/天 解锁文章
Fickle_actor
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js表格table的增删改
09-01
js 对表格的动态操作，动态添加，删除，修改
JavaScript--增删改
m0_63223374的博客
04-10 1226
JavaScript--订单的删除和增加与修改
js实现表格的增删改查
weixin_34194551的博客
01-10 346
这份代码实现了对表格的增加，删除，更改，查询。 点击一次添加按钮，表格会增加一行。 点击重置按钮，输入框的内容会被清空。 添加一行后，最后两格为更改和删除。点击更改，原有内容会各自显示在一个输入框内，此时更改二字变为保存，更改内容后，点击保存，内容又呈现不可更改状态，保存二字又变为修改；点击删除，删除本行。 在搜索框里输入对应文本，点击搜索，表格内匹配的文本背景变为其他颜色。 &lt...
js添加、修改、删除表格中数据、修改时在表格中直接修改
weixin_30875157的博客
04-02 923
<html> <head> <script type="text/javascript"> function show(){ //切换添加表单 var display=document.getElementById("add"); if(display.style.display=="block"){ displ...
js动态添加表格，批量删除表格
qq_40087726的博客
06-22 687
可以插入多行，批量删除 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../../plugin/layui/layui.js"></script> <link rel="stylesheet" href="../../plugin/layui/css/layui.cs
js动态实现表格添加和删除操作
Distance的博客
11-05 5255
运行效果如图（两种实现方案，被注释的是第一种实现方案） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ te...
使用JavaScript进行表格的添加和删除以及编辑
weixin_43191327的博客
10-12 1246
菜鸡前端的第四篇博客,感觉还算不上博客。 请叫我菜鸡,也算是每天对自己的一个总结吧 效果如下: 今天写的是一个表格,实现点击按钮能够添加和删除以及改变相关内容 <script> var users = [{ username: "张三", sex: "男", age: 26, }, ...
用Javscript实现表单复选框的全选功能
10-30
用Javscript实现表单复选框的全选功能
js实现表单项的全选、反选及删除操作示例
01-19
本文实例讲述了js实现表单项的全选、反选及删除操作。分享给大家供大家参考，具体如下： <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>网站会员激活码管理</title> [removed]...
JS实现复选框的全选和批量删除功能
10-20
本文主要介绍了JS实现复选框的全选和批量删除功能的方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
基于JS实现checkbox全选功能实例代码
10-21
最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单，再次点击全选取消选中。下面小编给大家分享实现代码，对js实现checkbox全选功能感兴趣的朋友参考下吧
JS代码实现table表格的增删改操作
qq_45746493的博客
12-13 2174
删除 通过点击按钮实现删除操作，使用remove来删除整行数据。 function deleRow(a){ //通过传参获取他的父级元素tr var tr = a.parentNode.parentNode; //通过remove来进行删除 tr.remove(); } 修改 首先通过cells获取到单元格的一个数组，将单元格每一个值赋值input中的value，可以在input元素中进行修改，修改之后再将每一个value赋值给td中，让它实现在table表格中
使用js对表格进行添加数据、刪除数据 批量删除数据
简单的男孩
01-21 2592
一 选中多个数据进行删除&&添加数据 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单选多选</title> <!--做一些修饰,自行定义--> <style> tr { text-align: center; } tr td:first-child {
JS实现表格的动态增删改功能
weixin_40758850的博客
04-11 5927
功能： 全选，全不选 删除对应行 修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改） 增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改） 效果图 ： 代码： 增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的 <!DOCTYPE html> <html lang="en"> <...
学习笔记----js实现表格增删功能（包括全选反选和取消全部的功能）
qq_42607483的博客
08-29 177
全部代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt
表格的增删改查+批量删除+全选+排序
yin_chenglong的博客
04-20 446
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js" &gt;&
JavaScript - 纯js写一个对表格的简单增删改查操作
tian_tian_gong的博客
10-25 2913
功能: 新增表格数据， 修改表格数据， 删除表格数据。 不完善区: 删除数据之后序号没有做处理 ，表单验证简单的提示警告， 没有文字提醒。 界面: 在线查看 下面是代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;me
用JavaScript写表格数据的增删改
从人到猿
06-27 1329
需求： ========================================== 学号 姓名 性别 年龄 操作 01001 王沛沛 男 18 删除 修改 01002 周凯 男 17 删除 修改 01003 赵萌 女 16 删除 修改 =========================================== 添加 学号： 01004 姓名： 周...
以表格形式展示内容，且表格数据可以实现前端Dom的增加、删除、修改、全选功能
最新发布
05-29
您可以使用 HTML 和 JavaScript 来创建一个表格，然后使用 JavaScript 来实现添加、删除、修改和全选功能。以下是一个示例代码： HTML 代码： ``` <div> <button onclick="addRow()">添加行</button> <button onclick="deleteRow()">删除行</button> <button onclick="editRow()">编辑行</button> <button onclick="selectAll()">全选</button> </div> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> <th><input type="checkbox" id="selectAllCheckbox"></th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> <td><button onclick="deleteRow(this)">删除</button></td> <td><input type="checkbox" class="selectCheckbox"></td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> <td><button onclick="deleteRow(this)">删除</button></td> <td><input type="checkbox" class="selectCheckbox"></td> </tr> </tbody> </table> ``` JavaScript 代码： ``` // 添加行 function addRow() { var table = document.getElementById("myTable"); var newRow = table.insertRow(-1); var nameCell = newRow.insertCell(0); var ageCell = newRow.insertCell(1); var genderCell = newRow.insertCell(2); var operationCell = newRow.insertCell(3); var selectCell = newRow.insertCell(4); nameCell.innerHTML = "<input type='text'>"; ageCell.innerHTML = "<input type='text'>"; genderCell.innerHTML = "<input type='text'>"; operationCell.innerHTML = "<button onclick='deleteRow(this)'>删除</button>"; selectCell.innerHTML = "<input type='checkbox' class='selectCheckbox'>"; } // 删除行 function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } // 编辑行 function editRow() { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); for (var i = 1; i < rows.length; i++) { var row = rows[i]; var cells = row.getElementsByTagName("td"); for (var j = 0; j < cells.length - 1; j++) { var cell = cells[j]; var input = document.createElement("input"); input.type = "text"; input.value = cell.innerHTML; cell.innerHTML = ""; cell.appendChild(input); } } } // 全选 function selectAll() { var selectAllCheckbox = document.getElementById("selectAllCheckbox"); var selectCheckboxes = document.getElementsByClassName("selectCheckbox"); for (var i = 0; i < selectCheckboxes.length; i++) { selectCheckboxes[i].checked = selectAllCheckbox.checked; } } ``` 在上面的示例中，我们创建了一个简单的表格，并使用 JavaScript 实现了添加、删除、编辑和全选功能。您可以根据自己的需求修改代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值