表格添加删除修改

精选转载

hfreeze 2015-03-11 14:22:58 博主文章分类：linux学习

<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="新增" onclick="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="保存" onclick="baocun()">
        <input type="reset" value="重置" 
    </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='删除' onclick='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>