JS兑现简单的增删改查-JavaSript-爱易网页

JS兑现简单的增删改查

日期：2014-05-16　浏览次数：20420 次

JS实现简单的增删改查

<%@ 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);
        
         ad

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS兑现简单的增删改查

相关资料更多>

推荐阅读更多>