<!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>
<script>
<!-- 显示为 id 隐藏的界面 -->
function show(id){
 document.getElementById(id).style.display="block";
}
</script>
</head>
<body bgcolor="#F9FD5E">
<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";
       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;
    }
 </script>
 
</center>
</body>
</html>