js实现的增删改查操作_晴空万里

http://blog.sina.com.cn/u/2780206164

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

js实现的增删改查操作

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

标签：

it

分类： 2_JavaScript

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

</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="重置" onclick="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='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='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>

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：对hibernate使用的一些个人总结,欢迎讨论!

后一篇：eclipse 快捷键大全[转载]

新浪BLOG意见反馈留言板　欢迎批评指正