JS实现简单的增删改查 -

robinsoncrusoe

浏览: 736575 次
性别:
来自: 深圳

最近访客更多访客>>

zhsh5395

u012363178

bbwang8088

风云幻真

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS实现简单的增删改查

博客分类：

JAVA

八卦体育 HTML SQL Blog

<%@ page language="java"
	import="java.util.*,java.sql.*,com.abin.db.connection.*,java.text.*,com.abin.test.connection.*"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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="重置" onclick="chongzhi()"> <!-- 重置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='修改' onclick='updateRow(this)'> <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>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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="重置" onclick="chongzhi()"> <!-- 重置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='修改' onclick='updateRow(this)'> <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>

http://hi.baidu.com/%C0%B6%C9%AB%D3%C7%D3%F4%BA%C3%B1%A6%B1%B4/blog/item/b1664c97c25031027bf480fd.html

分享到：

jsp中的cookie用法小实例 | Jsp 动态显示系统时间

2011-06-19 23:41
浏览 12924
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现简单的增删改查

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现简单的增删改查

评论

发表评论

相关推荐

Servlet上传文件

成为Java高手需要达到的25个学习目标--经典

Timer, Quartz 和 Spring 实现作业调度

Java 产生不重复的随机数

Date类学习总结(Calendar Date 字符串 相互转换 格式化)

jsp中的cookie用法小实例

Jsp 动态显示系统时间

java 动态显示时间

js 动态显示时间

HTML 显示系统时间

JavaScript 动态显示系统时间

两例JavaScript 获取当前系统日期和时间

java五种JSP页面跳转方法详解

Java Object方法

Java 数组，List，Itarator循环

JAVA DBClass操作数据库，这样算不算单列模式

Oracle日期函数集锦

java 页面传送数组

java Calendar当前时间

java Calendar日期相减问题

最近访客更多访客>>

Date类学习总结(Calendar Date 字符串相互转换格式化)