javascript dom 实现页面增、删、更新功能

最新推荐文章于 2022-09-24 15:47:57 发布
最新推荐文章于 2022-09-24 15:47:57 发布
阅读量100 收藏
点赞数
文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_6607/article/details/82035134
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript" src="../js/wpCalendar.js">

</script>

</head>

<body>
<div align="center">
<h1>
显示有的用户界面
</h1>

<div style="border: 1px red solid;margin-bottom: 100px; padding: 10px 10%">

<table border="1px" cellpadding="0" cellspacing="0" id="tusers">
<thead>
<tr>
<th>
<input type="checkbox" name="chbk" id="chbk1"/>
</th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="users">

</tbody>
</table>

</div>

<div style="border: 1px blue solid;">
<form>
<table id="divs">
<tbody id="addUsers">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<select id="sex">
<option value="男">
男
</option>
<option value="女">
女
</option>
</select>
</td>
</tr>

<tr>
<td>
邮箱:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="text" id="bir" name="bir" />
<input type=button value="点击看我"
οnclick="showCalendar(this,document.all.bir)">
</td>
</tr>

<tr id="addu">
<td colspan="2">
<input type="button" value="添加" οnclick="addUser()" id="add"/>
</td>
</tr>

<tr id="addu1">
<td colspan="2">
<input type="button" value="修改" id="upduser"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>


<script>
window.onload = function (){
document.getElementById("addu1").style.display="none";
}

function addUser(){
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var email = document.getElementById("email").value;
var bir = document.getElementById("bir").value;



//获取表格节点对象
var tusers = document.getElementById("tusers");

//创建行
var tr1 = document.createElement("tr");
var cbk = document.createElement("td");
var tname = document.createElement("td");
var tsex = document.createElement("td");
var temail = document.createElement("td");
var tbir = document.createElement("td");
var toper = document.createElement("td");


var cbk1 = document.createElement("input");
cbk1.setAttribute("type","checkbox");
cbk1.setAttribute("name","chbk");

cbk.appendChild(cbk1);
tname.appendChild(document.createTextNode(name));
tsex.appendChild(document.createTextNode(sex));
temail.appendChild(document.createTextNode(email));
tbir.appendChild(document.createTextNode(bir));
var adelete = document.createElement("a");
var aupdate = document.createElement("a");

adelete.setAttribute("href","#");
aupdate.setAttribute("href","#");

adelete.appendChild(document.createTextNode("删除 |"));
aupdate.appendChild(document.createTextNode("修改"));
toper.appendChild(adelete);
toper.appendChild(aupdate)


//往行中添加
tr1.appendChild(cbk);
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);

var users = document.getElementById("users");
users.appendChild(tr1);
tusers.appendChild(users);


//删除操作
adelete.onclick = function(){
users.removeChild(adelete.parentNode.parentNode);
}


//修改操作
aupdate.onclick = function(){
document.getElementById("addu").style.display="none";
document.getElementById("addu1").style.display="block";

var utr = aupdate.parentNode.parentNode;
var utrs= utr.childNodes;

document.getElementById("name").value=utrs[1].innerHTML;
document.getElementById("sex").value=utrs[2].innerHTML;
document.getElementById("email").value=utrs[3].innerHTML;
document.getElementById("bir").value=utrs[4].innerHTML;

var upUser = document.getElementById("upduser");

upUser.onclick = function(){
utr.childNodes[1].innerHTML = document.getElementById("name").value;
utr.childNodes[2].innerHTML = document.getElementById("sex").value;
utr.childNodes[3].innerHTML = document.getElementById("email").value
utr.childNodes[4].innerHTML = document.getElementById("bir").value
document.getElementById("addu1").style.display="none";
document.getElementById("addu").style.display="block";
}

}

}
</script>
iteye_6607
关注
js实时修改table数据
12-11
js实时修改table数据,简单易用，ajax,json
js表格操作，DOM实现数据动态增删查改
12-02
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
javascript实现添加删除修改数据
03-17 983
addUser.html 显示有的用户界面 名称 性别 邮...
js修改数据
weixin_48854245的博客
09-24 422
使用$set修改/增加数据源的具体数据
js添加删除数据记录
407指导员
11-02 262
js添加删除数据记录 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/javascript" charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="ex_2_style/
js 实用宝典(各种改变数据,检查数据)
VueJiang的博客
05-05 988
####1. 替换object对象的键名: 答: JSON.parse(JSON.stringify(data).replace(/keyName/g, ‘name’)) 注：data为数组，keyName为修改前的键名，name为修改后的键名 1、JSON.stringify()把json对象转成json字符串； 2、使用正则的replace()方法替换属性名； 3、JSON.parse()把json字符串又转成json对象。 ####2. 时间匹配: 例: 2021-01-21 11:17:33 正则
基于Bootstrap和Helper的JavaScript实现全功能增删改查设计源码
最新发布
10-05
它还可能涉及到DOM操作，从而实现无需刷新页面即可更新页面内容的功能。 项目的源码结构表明，开发团队采取了模块化的开发方式，将功能分散到不同的文件中。项目包含12个JavaScript文件，表明JavaScript代码被分割...
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
JavaScript实现HTML DOM增删改查操作的常见方法详解主要介绍了如何使用JavaScript对HTML文档对象模型（DOM）进行元素的查找、增加、删除和修改操作。这些操作是Web开发中非常基础且常用的功能，能够对网页元素进行...
Jquery与Bootstrap实现后台管理页面增删改查功能示例
10-20
在本文中，我们将深入探讨如何使用Jquery与Bootstrap来实现后台管理页面的增删改查（CRUD）功能。这是一个常见的需求，对于任何Web应用程序的后台管理系统来说都是基础且重要的部分。 首先，Jquery是一个轻量级的...
纯js的树形菜单(添加删除节点)
02-10
纯js的树形菜单(添加删除节点)动态添加父节点子节点。jquery实现
javascript动态添加一行数据和删除数据
10-28
利用javascript来结合html，可以动态的添加一行数据，和根据索引来删除一行数据。
利用原生JavaScript实现造日历轮子实例代码
11-28
前言 在日常开发中，大多数都是在和框架打交道，久而久之便遗忘了原生JS的感觉，个人感觉中原生JS基础还是很重要的，所以最近就利用了空余时间造一个轮子出来，虽然以我的水平造出来的轮子质量还是不太可靠的，但是我觉得用来练练手还是不错的，哈哈！！ So, Let’s begin! github：github.com/Zero-jian/p… 以下是日历的样子，是有点难看，讲究讲究，重点在于JS部分，嘻嘻！！！ 关于日历组件的实现思路 设置默认参数 检查节点参数是否传入，否则抛出错误 动态创建显示本日星期几的横轴 动态创建日历的日子 最后添加一点dom动作就好 先来看看构造函数
html+js实现同页面修改信息效果
07-24
html+js实现同页面修改信息效果。用户体验好，同一个页面用户个人中心安全设置
删除数据
weixin_44540198的博客
04-28 186
下面是我最近学习的对删除数据的总结 单条删除 function 自定义方法名(主键) { layer.confirm(“提示的文字”, { icon: 3, title: “提示框表头”, skin: “layui-layer-molv” }, function () { // layer.confirm是插件layui询问的提示框，icon: 3是一个问号的图表 $.post(“删除方法”, {...
js修改元素内容
优快云haoheng的博客
03-31 380
<button>按钮</button> <p id="demo">变变变</p> js代码 var btn = document.querySelector('button'); var p = document.getElementById("demo"); btn.onclick = function() { p.innerText = getDate(); } function getDate() { return "我变.
js数组删除指定数据方法
热门推荐
weixin_45547638的博客
07-11 2万+
js数组中删除指定数据 1，splice 删除（配合indexOf()方法） 2，filter 删除 3，Set 删除
选择多个数据进行删除的 javaScript
夜行不寂寞
10-26 818
    分为两种情况：1.当用户只选择了其中的一个数据 2.用户选择了多个数据进行删除。当用户只选择了一个数据时，判断checkbox是否被选择，如果选择则进行删除。当用户选择了多个数据时，从页面中读取所有checkbox的值，进行判断，用flag标识是否有多个被选中   function DelMutipalData(){    var thisform = docume
利用javascript实现简单的图书增减操作
cyang233的博客
12-30 486
书名：<input type="text" id="shu"> 价格：<input type="text" id="jia"> <button onclick="add()">添加</button> <table width="300px" border="1px" id="bg"> <tr> <td&...
[教学小东西][游戏][js] 修改js游戏的属性
yinglang19941010的专栏
05-13 6341
html/js小游戏链接： 骑士进度条 这是一个纯用html和js书写的游戏 F12打开源码调试界面，由点击事件找到相关js文件 浏览js在，找到游戏相关的全局变量 可以从名字和初始值来确定 coins: 金钱 days: 年龄 打开console，修改相关变量 正常的话，年龄就被set了 ...
JavaScript DOM实现表格数据的动态增删查改操作
资源摘要信息:"本文详细介绍了如何使用原生JavaScript（简称js）通过DOM（文档对象模型）实现对表格数据的动态增删查改操作。DOM是一种允许程序和脚本动态访问和更新文档内容、结构和样式的编程接口。在web开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值