javascript实现对html表格的增删改

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量493 收藏 1
点赞数
分类专栏： js初级 文章标签： JavaScript html table 增删改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25113097/article/details/71855823
版权
本文介绍了如何使用JavaScript实现对HTML表格的增、删、改功能。通过删除指定行、将表格单元格转换为输入框进行编辑，以及保存和取消编辑，实现了对表格数据的动态操作。
摘要由CSDN通过智能技术生成

javascript实现对html表格的增删改

代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
   #box{
 height:350px;width:1000px;position:absolute;background:#FFF;bottom:0;left:0;right:0;margin:0 auto;}
   #tb{
 width:1000px;height:350px;text-align:center;border:1px solid #ccc; }
   #tb td{ border-top:1px solid #ccc;width:250px;}
</style>
</head>
<form>
   <label for="name">姓名：</label>
最低0.47元/天 解锁文章
业余爱好者*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScript实现列表/表格的增删查改
北冥木鱼技术博客
04-07 5410
原生JavaScript实现表格的增删查改
js表格table的增删改
09-01
js 对表格的动态操作，动态添加，删除，修改
用Javascript实现对HTML表格简单的增删查改
秘密基地
08-08 1万+
在网页制作的过程中，有时候需要对表格进行操作，下面是一个简易的表格操作方案：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对表格操作</title> <style type="text/css"> *{ padding:0px; margn:0px; } table#stuRecordT
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
用JavaScript写表格数据的增删改
从人到猿
06-27 1345
需求： ========================================== 学号 姓名 性别 年龄 操作 01001 王沛沛 男 18 删除 修改 01002 周凯 男 17 删除 修改 01003 赵萌 女 16 删除 修改 =========================================== 添加 学号： 01004 姓名： 周...
JS对HTML表格进行增删改操作
10-21
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现对HTML表格的增删改操作。这个话题对于前端开发者来说非常实用，因为它涉及到网页动态交互和数据管理的基础知识。我们将从以下几个方面进行详细讲解： 1. *...
javascript实现表格增删改操作实例详解
12-10
本文实例讲述了javascript实现表格增删改操作的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
editable_static_form.rar_html 增删改
09-21
对于增删改功能，JavaScript需要处理相应的逻辑。增加行时，我们可以复制现有的行结构并插入到表格的合适位置；删除行时，选定的行应从DOM树中移除；修改行则涉及到获取当前单元格的值，更新数据，并反映到界面上。 ...
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
javascript实现表格添加删除等操作
03-26
静态实现javascript，实现表格的增加和删除等功能，值得初学者学习
js表格的增删改(凑字数)
06-27
用javascript写的一段代码，可以对表格进行添加、删除、修改的操作,是个小demo，理解思路没问题，项目中使用得自己搞样式，逻辑是没问题的
JavaScript - 纯js写一个对表格的简单增删改查操作
tian_tian_gong的博客
10-25 2941
功能: 新增表格数据， 修改表格数据， 删除表格数据。 不完善区: 删除数据之后序号没有做处理 ，表单验证简单的提示警告， 没有文字提醒。 界面: 在线查看 下面是代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;me
使用外置js实现对html的页面做一些增删改查的操作
KEELON的博客
05-19 4730
其实在之前的代码中，我们已经实现用js，对原来的js的页面进行一些动态的操作，这次我将用外置的js来实现这些操作;外置js只需要在html页面中获取js文件即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js中常用的事件</title> </head> <body> <img src
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
小策一喋的博客
06-06 405
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> <!-- 表格工具栏开始 --> <div id="prod...
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3111
eed
JavaScript实现动态查询表格
weixin_33691700的博客
03-13 292
JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE <html> <head> ...
JavaScript之实现基本的增删改查功能
热门推荐
阿毅
05-06 3万+
开心一笑 听说这两天，全国都很冷。福建人说1度好冷，北京人笑了：我们这零下17度。黑龙江人也笑了：我们这零下33度。呼伦贝尔人听到哈哈大笑：我们这零下43度。福建人听完冷笑一声：我说的是室内，室内，室内 视频教程 CSDN学院： http://edu.csdn.net/lecturer/994 腾讯学院： https://huangwy.ke.qq.com/ 网易学
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 789
title>充电效果
html网页制作表格代码,能增删改
05-25
以下是一个简单的 HTML 表格代码，可以进行增删改操作： ```html <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h2>学生成绩表</h2> <table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> <th>操作</th> </tr> <tr> <td>小明</td> <td>85</td> <td>90</td> <td>80</td> <td><button onclick="updateRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button></td> </tr> <tr> <td>小红</td> <td>90</td> <td>95</td> <td>85</td> <td><button onclick="updateRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button></td> </tr> <tr> <td colspan="4"><input type="text" id="name" placeholder="姓名"></td> <td><button onclick="addRow()">添加</button></td> </tr> </table> <script> function addRow() { var table = document.querySelector("table"); var name = document.querySelector("#name").value; if (!name) { alert("请输入姓名"); return; } var newRow = table.insertRow(-1); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); var cell5 = newRow.insertCell(4); cell1.innerHTML = name; cell2.innerHTML = ""; cell3.innerHTML = ""; cell4.innerHTML = ""; cell5.innerHTML = "<button onclick='updateRow(this)'>修改</button> <button onclick='deleteRow(this)'>删除</button>"; document.querySelector("#name").value = ""; } function deleteRow(button) { var row = button.parentNode.parentNode; row.parentNode.removeChild(row); } function updateRow(button) { var row = button.parentNode.parentNode; var cells = row.cells; for (var i = 1; i <= 3; i++) { var value = prompt("请输入" + cells[i].innerHTML + "的值", cells[i].innerHTML); if (value != null) { cells[i].innerHTML = value; } } } </script> </body> </html> ``` 这个表格包括了一个表头和两行数据，每一行都有一个“修改”按钮和一个“删除”按钮。最后一行是一个“添加”按钮和一个文本框，可以用它来增加新的行。JavaScript 代码包括了三个函数：addRow、deleteRow 和 updateRow，分别用于添加行、删除行和修改行。其中，添加行和删除行比较简单，修改行需要弹出一个输入框让用户输入新的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值