<!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=gb2312" />
<title>表格-增-删-改</title>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格-增-删-改</title>
<script>
<!-- 显示为 id 隐藏的界面 -->
function show(id){
document.getElementById(id).style.display="block";
}
</script>
<!-- 显示为 id 隐藏的界面 -->
function show(id){
document.getElementById(id).style.display="block";
}
</script>
</head>
<body bgcolor="#F9FD5E">
<hr>
<input type="button" value="新增" οnclick="show('fid')"/>
<hr>
<input type="button" value="新增" οnclick="show('fid')"/>
<center>
<table bordercolor="#F565EB" id="id1" border="1" cellpadding="1" cellspacing="1" width="95%" align="center">
<thead align="center">
<td>编号</td><td>标题</td><td>摘要</td><td>作者</td><td>类别</td><td>操作</td>
</thead>
</table>
<div id="fid" style="display:none">
<form marginheight="1" marginwidth="2">
<p>标题:<input type="text" id="biaoti" /></p>
<p>摘要:<input type="text" id="zhaiyao" /></p>
<p >作者:<input type="text" id="zuozhe" /></p>
<p>类型:<select id="leixing" name="20">
<option value="证劵">证劵</option>
<option value="体育">体育</option>
<option value="新闻">新闻</option>
<option value="娱乐">娱乐</option>
<option value="汽车">汽车</option>
<option value="气候">气候</option>
</select> </p>
<p><input type="button" value="保存" οnclick="add()"/>
<input type="reset" value="重置"/></p>
</form>
</div>
<hr>
<script>
<!-- 设置一个中间行变量 temprow 和 flag 修改行的时候用-->
var temprow;
var flag=0;
<!-- 当flag 是默认的时候按保存键执行 新增 保存功能,flag是其他值的时候 执行 else-->
function add(){
if(flag==0){
var row=document.getElementById("id1").insertRow(-1);
var a =row.insertCell(0);
var b =row.insertCell(1);
var c =row.insertCell(2);
var d =row.insertCell(3);
var e =row.insertCell(4);
var f =row.insertCell(5);
a.innerHTML=row.rowIndex;
// document.getElementById("biaoti").readOnly=false;
b.innerHTML=document.getElementById("biaoti").value;
c.innerHTML=document.getElementById("zhaiyao").value;
d.innerHTML=document.getElementById("zuozhe").value;
// debugger;
e.innerHTML=document.getElementById("leixing").value;
f.innerHTML="<input type='button' value='修改' οnclick='update_(this.parentNode.parentNode)'/> <input type='button' value='删除' οnclick='delete_(this.parentNode.parentNode.rowIndex)'/>";
document.getElementById("fid").style.display="none";
setkong();
}else{
<!-- 接 update_ 给原来的行赋值 然后把 flag 返回为原来的默认值-->
temprow.cells[1].innerHTML = document.getElementById("biaoti").value;
temprow.cells[2].innerHTML = document.getElementById("zhaiyao").value;
temprow.cells[3].innerHTML = document.getElementById("zuozhe").value;
temprow.cells[4].innerHTML = document.getElementById("leixing").value;
document.getElementById("fid").style.display="none";
<table bordercolor="#F565EB" id="id1" border="1" cellpadding="1" cellspacing="1" width="95%" align="center">
<thead align="center">
<td>编号</td><td>标题</td><td>摘要</td><td>作者</td><td>类别</td><td>操作</td>
</thead>
</table>
<div id="fid" style="display:none">
<form marginheight="1" marginwidth="2">
<p>标题:<input type="text" id="biaoti" /></p>
<p>摘要:<input type="text" id="zhaiyao" /></p>
<p >作者:<input type="text" id="zuozhe" /></p>
<p>类型:<select id="leixing" name="20">
<option value="证劵">证劵</option>
<option value="体育">体育</option>
<option value="新闻">新闻</option>
<option value="娱乐">娱乐</option>
<option value="汽车">汽车</option>
<option value="气候">气候</option>
</select> </p>
<p><input type="button" value="保存" οnclick="add()"/>
<input type="reset" value="重置"/></p>
</form>
</div>
<hr>
<script>
<!-- 设置一个中间行变量 temprow 和 flag 修改行的时候用-->
var temprow;
var flag=0;
<!-- 当flag 是默认的时候按保存键执行 新增 保存功能,flag是其他值的时候 执行 else-->
function add(){
if(flag==0){
var row=document.getElementById("id1").insertRow(-1);
var a =row.insertCell(0);
var b =row.insertCell(1);
var c =row.insertCell(2);
var d =row.insertCell(3);
var e =row.insertCell(4);
var f =row.insertCell(5);
a.innerHTML=row.rowIndex;
// document.getElementById("biaoti").readOnly=false;
b.innerHTML=document.getElementById("biaoti").value;
c.innerHTML=document.getElementById("zhaiyao").value;
d.innerHTML=document.getElementById("zuozhe").value;
// debugger;
e.innerHTML=document.getElementById("leixing").value;
f.innerHTML="<input type='button' value='修改' οnclick='update_(this.parentNode.parentNode)'/> <input type='button' value='删除' οnclick='delete_(this.parentNode.parentNode.rowIndex)'/>";
document.getElementById("fid").style.display="none";
setkong();
}else{
<!-- 接 update_ 给原来的行赋值 然后把 flag 返回为原来的默认值-->
temprow.cells[1].innerHTML = document.getElementById("biaoti").value;
temprow.cells[2].innerHTML = document.getElementById("zhaiyao").value;
temprow.cells[3].innerHTML = document.getElementById("zuozhe").value;
temprow.cells[4].innerHTML = document.getElementById("leixing").value;
document.getElementById("fid").style.display="none";
document.getElementById("biaoti").readOnly=false;
setkong();
alert("更新成功");
flag = 0;
}
}
function setkong(){
document.getElementById("biaoti").value = " ";
document.getElementById("zhaiyao").value = " ";
document.getElementById("zuozhe").value = " ";
document.getElementById("leixing").value = "证劵";
}
//注意delete 是关键字 方法名字一般不同于关键字
function delete_(row){
var i= row;
var r = confirm("确定要删除吗?");
if(r){document.getElementById("id1").deleteRow(row);
alert("删除成功!");
}
for(i;i<document.getElementById("id1").rows.length;i+=1){
var cell=document.getElementById("id1").rows[i].cells[0];
cell.innerHTML = i;
}
}
function update_(row){
<!-- 先设定 flag为1 打开保存输入框 把table里面的值 放到输入文本框里去 然后把row赋给中间变量 temprow -->
flag = 1;
document.getElementById("fid").style.display="block";
document.getElementById("biaoti").value = row.cells[1].innerHTML;
document.getElementById("biaoti").readOnly=true; //设定标题不能被修改
document.getElementById("zhaiyao").value = row.cells[2].innerHTML;
document.getElementById("zuozhe").value = row.cells[3].innerHTML;
document.getElementById("leixing").value = row.cells[4].innerHTML;
temprow=row;
setkong();
alert("更新成功");
flag = 0;
}
}
function setkong(){
document.getElementById("biaoti").value = " ";
document.getElementById("zhaiyao").value = " ";
document.getElementById("zuozhe").value = " ";
document.getElementById("leixing").value = "证劵";
}
//注意delete 是关键字 方法名字一般不同于关键字
function delete_(row){
var i= row;
var r = confirm("确定要删除吗?");
if(r){document.getElementById("id1").deleteRow(row);
alert("删除成功!");
}
for(i;i<document.getElementById("id1").rows.length;i+=1){
var cell=document.getElementById("id1").rows[i].cells[0];
cell.innerHTML = i;
}
}
function update_(row){
<!-- 先设定 flag为1 打开保存输入框 把table里面的值 放到输入文本框里去 然后把row赋给中间变量 temprow -->
flag = 1;
document.getElementById("fid").style.display="block";
document.getElementById("biaoti").value = row.cells[1].innerHTML;
document.getElementById("biaoti").readOnly=true; //设定标题不能被修改
document.getElementById("zhaiyao").value = row.cells[2].innerHTML;
document.getElementById("zuozhe").value = row.cells[3].innerHTML;
document.getElementById("leixing").value = row.cells[4].innerHTML;
temprow=row;
}
</script>
</center>
</body>
</html>
</script>
</center>
</body>
</html>
转载于:https://blog.51cto.com/boke2340/207564