<html>

<head>
    <title>增删改查</title>
 
   
<script type="text/javascript">
             // 新增
            function trdadd(){
            flag=false;
      document.getElementById("fid").style.display="block"; //控制显示
      chongzhi();
         document.getElementById("aid").disabled=false; //重新启用
     
      }
     
      //保存
      function baocun(){
            if(flag==false){
         
      add(flag);
      document.getElementById("fid").style.display="none";
            }else{
       
        
              add(flag);
              document.getElementById("fid").style.display="none";
            
            }
      }
     
      //重置
      function chongzhi(){
       document.getElementById("formid").reset();
      }
     
      //删除     
      function deleteRow(input){
          var s=input.parentNode.parentNode.rowIndex;
          document.getElementById("tableid").deleteRow(s);
          var num=document.getElementById("tableid").rows.length;
          for(var i=1;i<num;i+=1){
             table.rows[i].cells[0].innerHTML=i; //把每行的每一列设为i
            
             }
             alert("删除成功！！");
       }
      
      
   
</script>
</head>
<body>
 
<input type="button" value="新增" οnclick="trdadd()">
<center>
<table id="tableid" border="1" cellpadding="0" cellspacing="0" width="100%" >
<thead>
<tr>
                 <td>编号</td>
           <td>标题</td>
           <td>摘要</td>
           <td>作者</td>
           <td>类别</td>
           <td align="center" width = "15%">操作</td>
      </tr>
      </thead>
     </table>
      <br>
      <br>
      <br>
     
     
   
      <div id="fid" style="display : none">
      <form id="formid">
     <table id=aaid>
     <tr>
      <td colspan="6">标题 : <input id="aid" type="text" size="20%"> </td>
      <td colspan="6">摘要 : <input id="bid" type="text" size="20%"> </td>
     </tr>
     <tr>
      <td colspan="6">作者 : <input id="cid" type="text" size="20%"></td>
      <td>类型 :
       <select id="eid" name="myname">
          <option value="1">证券</option>
          <option value="2">体育</option>
          <option value="3">新闻</option>
          <option value="4">娱乐</option>
          <option value="5">八卦</option>
       </select>
     </td>
     </tr>
    
     </table>
    
        <input type="button" value="保存" οnclick="baocun()">
        <input type="reset" value="重置" <!-- 重置type类型必须为reset-->
    </form>
       </div>
 
   
    </center>
    <script type="text/javascript">
       //全局变量
       var table=document.getElementById("tableid");
       var flag=false;
       var getselectrow;
       function getNum(){
            var haoRow=table.rows[0];
            return haoRow.cells.length;
       }
      
       //添加方法
      
       function add(flag){
          if(!flag){
         // var num=getNum();
          var row=table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
          var add1=row.insertCell(0);
          var add2=row.insertCell(1);
          var add3=row.insertCell(2);
          var add4=row.insertCell(3);
          var add5=row.insertCell(4);
          var add6=row.insertCell(5);
        
         add1.innerHTML=document.getElementById("tableid").rows.length-1;//不加-1时id从二开始；原因：标题占一个
         add2.innerHTML=document.getElementById("aid").value;
         add3.innerHTML=document.getElementById("bid").value;
         add4.innerHTML=document.getElementById("cid").value;
         var tall=document.getElementById("eid");
         var   index=tall.selectedIndex;// 当前坐标
         var option=tall.options[index];
         add5.innerHTML=option.text;
         add6.innerHTML="<input type='button' value='修改' <input type='button' value='删除' οnclick='deleteRow(this)'>";
         //alert(num);
         alert("添加成功！！");
       
         }else{
         
         
            var row2=table.rows[getselectrow];//选中当前行
                   //把修改后的值设置到对应的文本框中
            row2.cells[1].innerHTML=document.getElementById("aid").value;
            row2.cells[2].innerHTML=document.getElementById("bid").value;
            row2.cells[3].innerHTML=document.getElementById("cid").value;
            var pall=document.getElementById("eid");
            var index=pall.selectedIndex; //当前坐标
            var option=pall.options[index];
            row2.cells[4].innerHTML=option.text;
           
            alert("修改成功！！");
         }    
    }
        
          //修改
         function updateRow(input){
         flag=true
         document.getElementById("aid").disabled=true;   //不能启用
         document.getElementById("fid").style.display="block";
        
         var i=input.parentNode.parentNode.rowIndex;
      
            getselectrow=i;
               //得到选中行的内容放到文本框
         document.getElementById("aid").value=table.rows[i].cells[1].innerHTML;
         document.getElementById("bid").value=table.rows[i].cells[2].innerHTML;
         document.getElementById("cid").value=table.rows[i].cells[3].innerHTML;
   
          var select=document.getElementById("eid");
            var index=select.selectedIndex;// 当前坐标
            var option= select.options[index];
            option.text=table.rows[i].cells[4].innerHTML;
        
        }
    </script>
</body>
</html>