js实现的增删改查操作_javascript 现增删改查(功能具体实现)-CSDN博客

js实现的增删改查操作

(2012-05-30 14:55:24)

标签：

it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<%@ page language="java" contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title>增删改查</title>

</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">
         <optionvalue="1">证券</option>
         <optionvalue="2">体育</option>
         <optionvalue="3">新闻</option>
         <optionvalue="4">娱乐</option>
         <optionvalue="5">八卦</option>
      </select>
    </td>
    </tr>

    </table>

       <input type="button" value="保存"οnclick="baocun()">
       <input type="reset" value="重置"οnclick="chongzhi()"> 
   </form>
      </div>


   </center>
   <script type="text/javascript">
      //全局变量
      var table=document.getElementByIdx_x("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.getElementByIdx_x("tableid").rows.length-1;//不加-1时id从二开始；原因：标题占一个
        add2.innerHTML=document.getElementByIdx_x("aid").value;
        add3.innerHTML=document.getElementByIdx_x("bid").value;
        add4.innerHTML=document.getElementByIdx_x("cid").value;
        var tall=document.getElementByIdx_x("eid");
        var   index=tall.selectedIndex;//当前坐标
        var option=tall.options[index];
        add5.innerHTML=option.text;
        add6.innerHTML="<input type='button' value='修改'οnclick='updateRow(this)'> <inputtype='button' value='删除'οnclick='deleteRow(this)'>";
        //alert(num);
        alert("添加成功！！");

        }else{


           var row2=table.rows[getselectrow];//选中当前行
                  //把修改后的值设置到对应的文本框中
           row2.cells[1].innerHTML=document.getElementByIdx_x("aid").value;
           row2.cells[2].innerHTML=document.getElementByIdx_x("bid").value;
           row2.cells[3].innerHTML=document.getElementByIdx_x("cid").value;
           var pall=document.getElementByIdx_x("eid");
           var index=pall.selectedIndex; //当前坐标
           var option=pall.options[index];
           row2.cells[4].innerHTML=option.text;

           alert("修改成功！！");
        }
    }

         //修改
        function updateRow(input){
        flag=true
        document.getElementByIdx_x("aid").disabled=true;  //不能启用
        document.getElementByIdx_x("fid").style.display="block";

        var i=input.parentNode.parentNode.rowIndex;

           getselectrow=i;
              //得到选中行的内容放到文本框
        document.getElementByIdx_x("aid").value=table.rows[i].cells[1].innerHTML;
        document.getElementByIdx_x("bid").value=table.rows[i].cells[2].innerHTML;
        document.getElementByIdx_x("cid").value=table.rows[i].cells[3].innerHTML;

         var select=document.getElementByIdx_x("eid");
           var index=select.selectedIndex;// 当前坐标
           var option= select.options[index];
           option.text=table.rows[i].cells[4].innerHTML;

       }
   </script>
</body>
</html>