(网页)javaScript增删改查(转)
转自CSDN:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>表格记录增删改查</title>
<style type="javaScript">
tr{
text-align:center;
}
</style> <script type="text/javascript">
//通过新增按钮来控制表格的显示与隐藏
var optionFlag = "save";
var updateRowIndex = -;
var checkFlag=false;//默认为不显示
function show() {
optionFlag = "save";
var f = document.getElementById("did");//获得id为did的 div
if(!checkFlag) {
f.style.visibility="visible";
}else{
f.style.visibility="hidden";
}
checkFlag=!checkFlag;
} //通过保存按钮将数据添加到表格中
function insertRow_() {
switch(optionFlag) {
case "save" :
insertRow_$save();
break;
case "update" :
insertRow_$update();
break;
default :
alert("操作失败！！");
} function insertRow_$save() {
//通过id获得要添加数据的表格
var table = document.getElementById("tableid"); //将所输入的内容赋给定义的变量
var titleName = document.getElementById("title").value;
var digestName = document.getElementById("digest").value;
var authorName = document.getElementById("author").value;
//获取下拉框内的内容
var selectIndex_ = document.getElementById("select");
var option = selectIndex_.options[selectIndex_.selectedIndex];
var selectName = option.text; //获取编号的内容
var numberid = table.rows.length; //在表尾添加一行数据
var row_ = table.insertRow(table.rows.length); row_.insertCell().innerHTML = numberid;
row_.insertCell().innerHTML = titleName;
row_.insertCell().innerHTML = digestName;
row_.insertCell().innerHTML = authorName;
row_.insertCell().innerHTML = selectName;
row_.insertCell().innerHTML = '<input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input> <input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>'; document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
document.getElementById("select").options[].selected="true"; var f = document.getElementById("did");
f.style.visibility="hidden"; alert("insert数据成功！！");
}
//修改后的保存
var tr;
function insertRow_$update() {
var table = document.getElementById("tableid");
tr = table.rows[updateRowIndex]; var p = document.getElementById("title");
tr.cells[].innerHTML = p.value; p = document.getElementById("digest");
tr.cells[].innerHTML = p.value; p = document.getElementById("author");
tr.cells[].innerHTML = p.value; p = document.getElementById("select");
var Index_ = p.selectedIndex;
var option = p.options[Index_];
var selectName = option.text;
tr.cells[].innerHTML = selectName; document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
document.getElementById("select").options[].selected="true"; var f = document.getElementById("did");
f.style.visibility="hidden"; alert("update数据成功！！");
}
} //通过删除按钮 删除当前所在行
function delete_(row_) {
var table = document.getElementById("tableid");
table.deleteRow(row_.rowIndex); refurbish_();
alert("delete数据成功！！");
} //刷新
function refurbish_() {
var table = document.getElementById("tableid");
//获得table的行数
var rows = table.rows;
for(var i=;i<rows.length;i++) {
rows[i].cells[].innerHTML = i;
}
} //通修改按钮对table里的数据进行修改
function update_(row) {
updateRowIndex = row.rowIndex;
optionFlag = "update";
//对table里的数据进行回显
document.getElementById("title").value = row.cells[].innerHTML;
document.getElementById("digest").value = row.cells[].innerHTML;
document.getElementById("author").value = row.cells[].innerHTML;
var selectText = row.cells[].innerHTML;
var sel = document.getElementById("select");
var ops = sel.options;
for(var i=;i<ops.length;i++) {
if(selectText==ops[i].text) {
sel.options[i].selected = "true";
}
}
var f = document.getElementById("did");
f.style.visibility="visible";
}
</script>
</head> <body>
<input type="button" value="新增" onclick="show()"></input>
<div>
<table border = "" cellspacing = "" id="tableid" width="90%">
<tr bgcolor="yellow">
<th>编号</th>
<th>名称</th>
<th>代码</th>
<th>机构</th>
<th>类别</th>
<th>操作</th>
</tr>
<tr>
<td></td>
<td>民生宝</td>
<td></td>
<td>ms</td>
<td>基金</td>
<td>
<input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>
<input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>
</td>
</tr>
</table>
</div>
<br>
<div align="center" id="did" style="visibility:hidden">
<form action="">
<table>
<tr>
<td>标题：</td>
<td><input type="text" id="title"></input></td>
<td>摘要：</td>
<td><input type="text" id="digest"></input></td>
</tr> <tr>
<td>作者：</td>
<td><input type="text" id="author"></input></td>
<td>类别：</td>
<td align="left">
<select id="select">
<option>证劵</option>
<option>基金</option>
<option>股票</option>
</select>
</td>
</tr>
</table>
<br>
<center>
<input type="button" value="保存" onclick="insertRow_()"></input>
<input type="reset" value="重置"></input>
</center>
</form>
</div>
</body>
</html>
(网页)javaScript增删改查(转)的更多相关文章
- SSM整合_年轻人的第一个增删改查_新增
写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...
- 招新系统（jsp+servlet，实现简略前端网页注册登录+后台增删改查，分学生和管理员，Java语言，mysql数据库连接，tomcat服务器）
生活不只是眼前的苟且,还有诗和远方. 架构说明: 要求是采用MVC模式,所以分了下面的几个包,但是由于是第一次写,可能分的也不是很清楚: 这个是后台部分的架构: 这个是前端的的展示: (那个StuLo ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
- javaScript实现增删改查
自己写的一个html+javaScript实现增删改查小实例.下面是js代码1. [代码][JavaScript]代码 //1.创建受捐单位数组var arrOrgData = [ { & ...
- javascript相关的增删改查以及this的理解
前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...
- JavaScript之DOM的增删改查
JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...
- 用 JS（JavaScript ）实现增删改查
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...
- JavaScript（JS）之Javascript对象DOM之增删改查（四）
创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...
随机推荐
- kaili 安装中文输入法
kaili 安装中文输入法 更换为国内可用的源: vim /etc/apt/sources.list 添加以下内容: deb http://mirrors.ustc.edu.cn/kali sana ...
- Linux下Clamav 杀毒软件安装使用文档
一.安装Clamav杀毒工具 0.安装Clamav需要的依赖包 yum install libxml* openssl* -y 1.创建clamav组 groupadd clamav 2.创建clam ...
- 一种基于python的人脸识别开源系统
今天在搜索人脸识别的文章时,无意中搜到一个比较开源代码,介绍说是这个系统人脸的识别率 是比较高的,可以达到:99.38%.这么高的识别率,着实把我吓了一跳.抱着实事求是的态度.个人 就做了一些验证和研 ...
- Android分享内容和接收分享内容小小实现
先来说说分享,毕竟没有分享何来接收分享可谈? 分享目前已实现的有两种方式:后台代码实现.ShareActionProvider实现,接着先说通过代码实现 Intent intent=new Inten ...
- Python函数学习——初步认识
函数使用背景 假设老板让你写一个监控程序,24小时全年无休的监控你们公司网站服务器的系统状况, 当cpu＼memory＼disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下 ...
- jfixed使固定行列可编辑表格
功能: 固定行列 可以在表格直接编辑 使用ajax对数据操作 使用tab键在可编辑列切换简单介绍一下jfixed 表格插件, jfixed /jfixed.rar
- Jmeter参数化的方法
测试接口时,使用Jmeter在请求中输入参数,若是有多种情况,有多条测试参数,是不是要每个情况逐条输入呢?逐条输入会让人觉得比较麻烦,因此,就有了Jmeter参数化. Jmeter参数化的方法: 用户 ...
- Java架构师最关键三个思维转变方式，框架的合理运用
很久没有写思维的文章,特别是在写完思维的逻辑和思维的框架后,对于理论层面的自己也不太想写,但是对于实际案例层面的写起来又比较花时间,而且案例基本在IT专业领域不是所有人都能看明白. 我们前面写过思维的 ...
- curl: (7) Failed connect to 172.16.100.199:9200; 没有到主机的路由
没有到主机的路由这种问题很常见,多数是由机器的防火墙没有关闭. Ubuntu 查看防火墙状态 ufw status 关闭防火墙 ufw disable centos6 查看防火墙状态 service ...
- Spark之submit任务时的Initial job has not accepted any resources; check your cluster UI to ensure that workers are registered and have sufficient memory
Spark submit任务到Spark集群时,会出现如下异常: Exception 1:Initial job has not accepted any resources; check your ...