`
robinsoncrusoe
  • 浏览: 748756 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

JS实现简单的增删改查

    博客分类:
  • JAVA
阅读更多
<%@ 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
分享到:
评论

相关推荐

    html+js实现增删改查,超简单

    html+js实现增删改查,超简单

    html最简单的增删改查实现方式

    用js实现的一个增删改查,给学校javascript的同学用

    Vs Code Vue实现增删改查

    本教程将重点讲解如何使用Visual Studio Code(简称Vs Code)这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先,我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架,它具有轻量级...

    BootStrapTable实现增删改查

    在MVC(Model-View-Controller)架构中,结合C#后端,BootstrapTable可以实现数据的增删改查操作,提供用户友好的界面和高效的后台处理。 1. **BootstrapTable的基本结构** BootstrapTable的核心是HTML的`&lt;table&gt;`...

    基于SpringBoot+Vue实现增删改查和分页查询DEMO(源码+数据库)

    springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO(源码+数据库) 技术栈 数据库:MySQL 后端框架:SpringBoot+Spring Data JPA 前端框架:Vue-ElementUI

    EasyUI 增删改查的简单实现

    通过这些技术的结合,开发者可以快速构建出一个功能完备的管理界面,实现数据的增删改查,同时保持代码结构清晰,易于维护。项目中的 `src` 目录可能包含 Java 源代码、配置文件、资源文件等,这些内容构成了实际...

    js实现Ajax效果的增删改查

    在这个“js实现Ajax效果的增删改查”主题中,我们将深入探讨如何利用JavaScript和Ajax技术来实现数据库数据的CRUD(创建、读取、更新和删除)操作。 首先,我们需要理解Ajax的工作原理。Ajax通过创建XMLHttpRequest...

    简单html增删改查

    在这个“简单html增删改查”的主题中,我们主要关注如何使用HTML来实现基本的数据操作,这对于初学者来说是非常实用的入门知识。 在HTML中,增删改查通常指的是对网页上动态数据的管理,虽然HTML本身不具备动态功能...

    AngularJS模块化开发--增删改查

    3. `services.js`:可能包含一个或多个服务,用于封装与后端API的交互,实现数据的增删改查操作。 4. `directives.js`:可能包含自定义指令,用于扩展AngularJS的功能,例如验证输入或创建复杂的UI组件。 5. `...

    web js购物车(增删改查)

    本项目"web js购物车(增删改查)"是针对初学者设计的一个实践案例,旨在帮助他们理解如何使用JavaScript实现购物车的基本功能,如添加商品、删除商品、修改商品数量以及查询购物车内商品。以下将详细介绍这些核心...

    extJs 简单的增删改查

    在实现增删改查功能时,通常会用到以下几个主要的ExtJS组件: 1. 表格(Grid):用于展示数据列表,可以与Ext.data.Store关联,自动处理数据的加载、排序、分页等操作。 2. 表单(Form):用于输入和编辑数据,包含...

    通过js实现cookies 的增删改查

    通过js实现cookies 的增加删除修改,解决chrome读为 undefine 的问题

    servlet实现增删改查

    在Java Web开发中,Servlet是...总结,使用Servlet实现增删改查涉及了HTTP请求处理、数据库操作、响应生成等多个环节,是理解Web应用开发的关键步骤。通过这个项目,初学者能够学习到如何在实际环境中运用Servlet技术。

    ssm实现增删改查

    下面将详细解释这三个组件在实现增删改查(CRUD)操作中的作用。 **Spring框架**:Spring作为一款全面的后端开发框架,提供了依赖注入(DI)和面向切面编程(AOP)等功能。在实现增删改查中,Spring通过DI管理各个...

    bootstrap增删改查页面

    这个“bootstrap增删改查页面”显然与使用Bootstrap来设计和实现数据管理界面有关,通常包括添加、编辑、删除和查询等功能。下面我们将深入探讨Bootstrap在构建这种页面时的关键知识点。 1. **响应式布局**:...

    php图书管理系统实现增删改查

    在本项目中,"php图书管理系统实现增删改查"是一个基于PHP开发的简单图书管理应用,旨在帮助用户轻松地管理图书数据,包括添加新图书、删除现有图书、修改图书信息以及查询图书详情。这个系统对于初学者来说,是理解...

    springboot+mybatis+mysql+layUI+thymeleaf实现增删改查

    在本项目中,我们利用了SpringBoot、MyBatis、MySQL、LayUI和Thymeleaf这五种核心技术,构建了一个完整的Web应用程序,实现了学生信息管理系统的增删改查功能。下面将对这些技术及其在项目中的应用进行详细解释。 *...

    学生信息管理系统(实现增删改查操作)Java+Servlet+HTML+CSS+数据库

    数据库部分:创建表、增删改查语句的书写等。 前端部分:HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化(添加私有...

    ajax经典面试题;一个页面实现增删改查之纯JS版

    本话题将详细探讨如何在一个页面上利用纯JavaScript实现增删改查(CRUD)操作,并结合ASP.NET来构建Web应用程序。 首先,`Ajax`的核心理念在于不刷新整个页面的情况下更新页面的特定部分,通过异步通信与服务器进行...

Global site tag (gtag.js) - Google Analytics