确定删除修改取消

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table width="600" border="1" id="tb1">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>鞋子a</td>
<td>10</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子b</td>
<td>20</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子c</td>
<td>30</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子d</td>
<td>40</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子e</td>
<td>50</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>

</table>
<table>
<tr>
<td>商品名称 </td>
<td><input id="name"/></td>
</tr>
<tr>
<td>数量 </td>
<td><input id="cnt"/></td>
</tr>
<tr>
<td>价格 </td>
<td><input id="price"/></td>
</tr>
</table>
<button onclick="add();">增加</button>
<script>

//增加
function add(){
var name=getEl("name").value;
getEl("name").value="";
var cnt=getEl("cnt").value;
getEl("cnt").value="";
var price=getEl("price").value;
getEl("price").value="";

var html=‘ <tr>\
<td>‘+name+‘</td>\
<td>‘+cnt+‘</td>\
<td>‘+price+‘</td>\
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />\
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>\
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)"\ style="display:none"/>\
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)"\ style="display:none"/></td>\
</tr>‘;
var tbody=getEls(tb,"tbody")[0];
var h=tbody.innerHTML;
tbody.innerHTML=h+html;
}
</script>
<script>
function getEl(id){return document.getElementById(id);}
function getEls(obj,tag){return obj.getElementsByTagName(tag);}

var tb=getEl("tb1");

//删除
function del(btn){
var td=btn.parentNode;
var tr=td.parentNode;
//alert(tr.innerHTML);
//alert(tr.outerHTML);
//alert(tr.innerText);
var index=tr.rowIndex;//获取行号
tb.deleteRow(index);
}

//修改
function edit(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var oldCnt=tr.cells[1].innerText;
td.xxx=oldCnt;

//alert(oldCnt);
tr.cells[1].innerHTML="<input value=‘"+oldCnt+"‘>";//将内容改为文本框
//隐藏编辑
btn.style.display="none";
var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[2].style.display="";
btns[3].style.display="";
}
//确定
function ok(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var txtTd=tr.cells[1];//文本框所在的td
var txt=getEls(txtTd,"input")[0];//找到文本框
var cnt=txt.value;

txtTd.innerText=cnt;
var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[1].style.display="";
btns[2].style.display="none";
btns[3].style.display="none";
}
//取消
function cancel(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var txtTd=tr.cells[1];//文本框所在的td

txtTd.innerText=td.xxx;//原数量

var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[1].style.display="";
btns[2].style.display="none";
btns[3].style.display="none";
}
</script>
</body>
</html>

时间： 2024-11-02 19:06:58

确定删除修改取消的相关文章

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

JTree 添加 , 删除, 修改

package com.swing.demo; import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import javax.swing.CellEdi

[JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改

上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管理的ManageServlet. 接着我们需要一个展现数据的页面,也就是 UserList.jsp <%@page import="com.babybus.sdteam.vo.Student"%> <%@ page language="java" im

Jquery实现表格中的查看删除修改

首先我们在学习js的时候就有接触到表格中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多. 现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大. 第一步:我们编写html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

c# 注册表操作,创建,删除,修改,判断节点是否存在

用.NET下托管语言C#操作注册表,主要内容包括:注册表项的创建,打开与删除.键值的创建(设置值.修改),读取和 删除.判断注册表项是否存在.判断键值是否存在. 准备工作: 1:要操作注册表,我们必须要引入必要的命名空间: C#代码    using Microsoft.Win32; 在这个命名空间里面包含了许多注册表相关的类,足够我们使用了~~ 2:命名空间里面提供了一个类:RegistryKey 利用它我们可以定位到注册表最开头的分支: ClassesRoot,CurrentUser,Use

用SQL语句添加删除修改字段

1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNcolumn_NAME3.修改字段类型     ALTER TABLE table_name     ALTER COLUMNcolumn_name new_data_type4.sp_rename 改名     EXEC sp_rename '[dbo].[Table_1].[filedName1]

用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等

用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP COLUMN column_NAME 3.修改字段类型 ALTER TABLE table_name ALTER COLUMN column_name new_data_type 4.sp_rename 改名 更改当前数据库中用户创建对象(如表.列或用户定义数据类型)的名称. 语法 sp_rename

对表格单元格的添加删除修改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick="add()">add</button> </div> <div id="a3"> <button onclick="del()">del</button> </div> &l