简单的Javascript实现内容的增删改(一)

最新推荐文章于 2023-02-11 11:42:33 发布
最新推荐文章于 2023-02-11 11:42:33 发布
阅读量98 收藏
点赞数
文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15130625/article/details/83873690
版权
[color=blue]
<!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>
名称
</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>
<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>
<td colspan="2" id="addu">
<input type="button" value="添加" οnclick="addUser()" />
</td>
</tr>
<tr id="addu1">
<td colspan="2">
<input type="button" value="修改" id="upduser" />
</td>
</tr>
</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 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 users = document.getElementById("users");

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(aupdate);
toper.appendChild(adelete);

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

users.appendChild(tr1);
tusers.appendChild(users);

adelete.onclick = function() {
var tda = adelete.parentNode;
var trb = tda.parentNode;
users.removeChild(trb);
}
aupdate.onclick = function() {
document.getElementById("addu").style.display = "none";
document.getElementById("addu1").style.display = "block";
var use = aupdate.parentNode.parentNode;
var uses = use.childNodes;

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

var upUser = document.getElementById("upduser");
upUser.onclick = function() {

use.childNodes[0].innerHTML = document.getElementById("name").value;
use.childNodes[1].innerHTML = document.getElementById("sex").value;
use.childNodes[2].innerHTML = document.getElementById("email").value
use.childNodes[3].innerHTML = document.getElementById("bir").value

document.getElementById("addu1").style.display = "none";
document.getElementById("addu").style.display = "block";
}

}

}
</script>[/color]
qq_15130625
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript中方便增删改cookie的一个类
10-27
请注意，虽然使用JavaScript操作cookie是一种简单的方法，但需要注意的是，现代Web应用中，更推荐使用Web存储（Web Storage）的方式，如localStorage和sessionStorage，它们可以存储更多的数据，而且使用起来更为...
JavaScript 增删改查
mamayf的博客
05-17 877
实现 JavaScript 增删改查 htmlhtmlhtml 代码 <div class="container"> <div class="topview"> <div class="btnview" onclick="add"> <text>增加</text> </div> <div class="btnview" onclick="delall"
JavaScript_实现增删改操作（新增、删除、修改）
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
JS增删改查常用方法
最新发布
zhaoyifei01的博客
02-11 2156
增删改查
JavaScript数组的增删查等各种操作
dyjffgkvfg的博客
11-02 2461
语法：var 变量名=数组.findIndex(function(value，index ，array){return 表达式 }语法：var 变量名=数组.find(function(value，index ，array){return 表达式 }语法：数组.unshift(数值1，数值2，数值3.....);参数一：数组起始索引下标；语法：数组.concat( 数组1，数组2，数组3.....)语法：数组.push(数值1，数值2，数值3.....);语法：数组.splice(参数一，参数二，参数三)
JavaScript之实现基本的增删改查功能
热门推荐
阿毅
05-06 3万+
开心一笑 听说这两天，全国都很冷。福建人说1度好冷，北京人笑了：我们这零下17度。黑龙江人也笑了：我们这零下33度。呼伦贝尔人听到哈哈大笑：我们这零下43度。福建人听完冷笑一声：我说的是室内，室内，室内 视频教程 CSDN学院： http://edu.csdn.net/lecturer/994 腾讯学院： https://huangwy.ke.qq.com/ 网易学
使用js dom和jquery分别实现简单增删改
10-25
现在，我们具体来实现增删改这几个操作。 1. 增加元素： 在文档中增加一个新元素可以通过创建新节点并将其添加到DOM中实现。在jQuery中，我们可以通过`.append()`或`.prepend()`方法将新创建的HTML元素（如`<li>`...
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
对txt文件中的数据进行增删改查
07-24
对于任意txt文件中的数据，先按行进行读取到集合中，然后根据集合的常用方法实现对txt中数据的增删改查。
javascript控制增删行
11-05
如果有一次性提交多条记录的需求可以使用这段代码。
JavaScript实现动态增删表格
Catalina
03-08 1443
在上方文本框填入”姓名/Email/ 年龄”，实现在下方表格中动态添加或删除单元格 效果：1. Html代码：<body> <p align="center" id="info"> 姓名 : <input type="text" id = "username"> Email : <input type="text" id = "email"> 年龄 : <input ty
JS——实现简单的表格增删
进击的葱
01-13 685
描述： JS——实现简单的表格增删。 效果： 实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &amp
jsDOM增删改查操作
秋雨梧桐
07-18 5401
/*              * dom节点增删改查              * */
纯javascript实现增删改查
jiangyang112233的博客
07-21 1176
效果图： html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粤菜字典admin</title> </head> <script type="text/javascript" src="js/js.js" ></script> <body> <table border="1" cel
js实现增删改查
yang_tang的博客
05-14 1459
用js实现增删改查，对于我而言，还是有点难度的，但是代码都看明白了，只是修改还没有实现，正在努力补充中，而代码的详细解释我在下面代码中也做了相应的注释。 增删改查 /** * 提交信息 */ function submitValue(){ var
JS实现表格的动态增删改功能
weixin_40758850的博客
04-11 5968
功能： 全选，全不选 删除对应行 修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改） 增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改） 效果图 ： 代码： 增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的 <!DOCTYPE html> <html lang="en"> <...
JavaScript--动态添加元素（纯js书写table并删除数据）
01-09 1680
本文是对上一篇博文的扩展，用js书写表格，并添加和删除数据，详细代码解释见代码页。 对于文中使用的script脚本函数，下载地址如下：https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ 页面效果如图： 代码如下： 1 <!DOCTYPE html> 2 <html> 3 ...
JavaScript表格动态增删改实现教程
"本文将详细解析如何使用JavaScript实现表格...JavaScript提供了强大的DOM操作能力，使得在浏览器端实现表格的增删改操作变得简单而高效。通过学习和掌握这些技巧，开发者可以构建更加灵活和动态的数据展示和管理页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值