<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>MyHtml.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">
  function show(id){
      document.getElementById(id).style.display="block";
      flag=0;//一个变量。。控制保存是增加的保存还是修改的保存
       document.getElementById("bid").readOnly=false;
  }

  </script>
    </head>

    <body>
        <input type="button" value="新增" />
        <br />
        <table id="myTable" border="1" cellpadding="0" cellspacing="0"
            width="100%">
            <tr>
                <td>
                    编号
                </td>
                <td>
                    标题
                </td>
                <td>
                    摘要
                </td>
                <td>
                    作者
                </td>
                <td>
                    类别
                </td>
                <td>
                    操作
                </td>
            </tr>
        </table>
        <br />
        <center>
            <div id="fid" style="display: none;">
                <form id="form">
                    标题
                    <input type="text" id="bid" width="12">

                    摘要
                    <input type="text" id="zid" width="12">
                    <br />
                    作者
                    <input type="text" id="aid" width="12">


                    类别
                    <select id="sid">
                        <option id="证券">
                            证券
                        </option>
                        <option id="计算机">
                            计算机
                        </option>
                        <option id="机械">
                            机械
                        </option>
                        <option id="电子">
                            电子
                        </option>
                        <option id="新闻">
                            新闻
                        </option>
                    </select>

                    <br />


                    <p>

                        <input type="button" value="保存" οnclick="save()">
                        <input type="button" id="rit" value="重置" οnclick="reset_()">
                    </p>
                </form>
            </div>
        </center>


        <script type="text/javascript">
        var res=0;
        var table=document.getElementById("myTable");
        var select=document.getElementById("sid");
        var flag=0;
   function save()
  {
     
      if(flag==0){
    
      var x=table.insertRow(-1);//往下增加
      var a=x.insertCell(0);
      var b=x.insertCell(1);
      var c=x.insertCell(2);
      var d=x.insertCell(3);
      var e=x.insertCell(4);
      var f=x.insertCell(5);
      a.innerHTML=document.getElementById('myTable').rows.length-1;
      b.innerHTML=document.getElementById('bid').value;
      c.innerHTML=document.getElementById('zid').value;
      d.innerHTML=document.getElementById('aid').value;
      var select=document.getElementById('sid');
      var sindex=select.selectedIndex;// 当前坐标
      var option= select.options[sindex];
      e.innerHTML=option.text;
    //将两个按钮用document写出来，不是以字符串的形式。。
     var update=document.createElement("input");
     update.setAttribute("type","button");
     update.setAttribute("value","修改");
     update.setAttribute("onclick","update(this)");
     f.appendChild(update);
     var del=document.createElement("input");
     del.setAttribute("type","button");
     del.setAttribute("value","删除");
     del.setAttribute("onclick","dele(this)");
     f.appendChild(del);
      document.getElementById("fid").style.display="none";
      alert("增加成功");
      res=document.getElementById('bid' ).value;
 }else{
     table.rows[flag].cells[1].innerHTML=document.getElementById('bid' ).value;
     table.rows[flag].cells[2].innerHTML=document.getElementById('zid').value;
      table.rows[flag].cells[3].innerHTML=document.getElementById('aid').value;
      var select=document.getElementById('sid');
      var sindex=select.selectedIndex;// 当前坐标
      var option= select.options[sindex];
      table.rows[flag].cells[4].innerHTML=option.text;
      document.getElementById("form").reset();
      document.getElementById("fid").style.display="none";
      alert("更新成功");
      }
  }
  function update(input){
    flag = 1;
    document.getElementById("bid").readOnly=true;
    document.getElementById("fid").style.display="block";
 
    var td=input.parentNode;
    var tr=td.parentNode;
     flag=tr.rowIndex;
     document.getElementById('bid').value= tr.cells[1].innerHTML;
     document.getElementById('zid').value=tr.cells[2].innerHTML;
     document.getElementById('aid').value= tr.cells[3].innerHTML;
     var option=tr.cells[4].innerHTML;
     document.getElementById(option).selected=true;
   
  }
  function dele(input){
      var td=input.parentNode;
      var tr=td.parentNode;
     var tindex=tr.rowIndex;
      table.deleteRow(tindex);
    var x=table.rows.length;
   
    for(var i=1;i<x;i+=1){
     table.rows[i].cells[0].innerHTML=i;
    }
 }
 
  function reset_(){
     if(flag==0){
     document.getElementById("form").reset();
     }
     else{
    document.getElementById("form").reset();
 
      document.getElementById("bid").value=res;
    
      
     }
  }
 
 
 
  </script>

    </body>
</html>
这个程序还可以完善一下，增加没有使用for循环，我也不知道如何使用。。