javaScript增删改查(转)

Posted 2020-10-13 六一儿童节
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript增删改查(转)相关的知识，希望对你有一定的参考价值。
转自CSDN:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>表格记录增删改查</title>
    <style type="javascript">
       tr{
         text-align:center;
       }
    </style>
   
    <script type="text/javascript">
       //通过新增按钮来控制表格的显示与隐藏
       var optionFlag = "save";
       var updateRowIndex = -1;
       var checkFlag=false;//默认为不显示
       function show() {
         optionFlag = "save";
         var f = document.getElementById("did");//获得id为did的 div
           if(!checkFlag) {
              f.style.visibility="visible";
           }else{
              f.style.visibility="hidden";
           }
           checkFlag=!checkFlag;
       }
      
       //通过保存按钮将数据添加到表格中
       function insertRow_() {
         switch(optionFlag) {
            case "save" :
               insertRow_$save();
               break;
            case "update" :
               insertRow_$update();
               break;
            default :
               alert("操作失败！！"); 
         }
        
         function insertRow_$save() {
            //通过id获得要添加数据的表格
          var table = document.getElementById("tableid");
         
          //将所输入的内容赋给定义的变量
          var titleName = document.getElementById("title").value;
          var digestName = document.getElementById("digest").value;
          var authorName = document.getElementById("author").value;
          //获取下拉框内的内容
          var selectIndex_ = document.getElementById("select");
          var option = selectIndex_.options[selectIndex_.selectedIndex];
          var selectName = option.text;
         
          //获取编号的内容
          var numberid = table.rows.length;
         
          //在表尾添加一行数据
          var row_ = table.insertRow(table.rows.length);
 
          row_.insertCell(0).innerHTML = numberid;
          row_.insertCell(1).innerHTML = titleName;
          row_.insertCell(2).innerHTML = digestName;
          row_.insertCell(3).innerHTML = authorName;
          row_.insertCell(4).innerHTML = selectName;
          row_.insertCell(5).innerHTML = ‘<input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>&nbsp;<input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>‘;
         
          document.getElementById("title").value = "";
          document.getElementById("digest").value = "";
          document.getElementById("author").value = "";
          document.getElementById("select").options[0].selected="true";
         
          var f = document.getElementById("did");
          f.style.visibility="hidden";
         
          alert("insert数据成功！！");
         }
         //修改后的保存
         var tr;
         function insertRow_$update() {
             var table = document.getElementById("tableid");
             tr = table.rows[updateRowIndex];
            
             var p = document.getElementById("title");
             tr.cells[1].innerHTML = p.value;
            
             p = document.getElementById("digest");
             tr.cells[2].innerHTML = p.value;
            
             p = document.getElementById("author");
             tr.cells[3].innerHTML = p.value;
            
             p = document.getElementById("select");
             var Index_ = p.selectedIndex;
             var option = p.options[Index_];
             var selectName = option.text;
             tr.cells[4].innerHTML = selectName;
            
             document.getElementById("title").value = "";
          document.getElementById("digest").value = "";
          document.getElementById("author").value = "";
          document.getElementById("select").options[0].selected="true";
            
             var f = document.getElementById("did");
             f.style.visibility="hidden";
            
             alert("update数据成功！！");
         }
       }
      
       //通过删除按钮  删除当前所在行
       function delete_(row_) {
         var table = document.getElementById("tableid");
         table.deleteRow(row_.rowIndex);
        
         refurbish_();
         alert("delete数据成功！！");
       }
      
       //刷新
       function refurbish_() {
         var table = document.getElementById("tableid");
         //获得table的行数
         var rows = table.rows;
         for(var i=1;i<rows.length;i++) {
           rows[i].cells[0].innerHTML = i;
         }
       }
      
       //通修改按钮对table里的数据进行修改
       function update_(row) {
         updateRowIndex = row.rowIndex;
         optionFlag = "update";
         //对table里的数据进行回显
         document.getElementById("title").value = row.cells[1].innerHTML;
         document.getElementById("digest").value = row.cells[2].innerHTML;
         document.getElementById("author").value = row.cells[3].innerHTML;
         var selectText = row.cells[4].innerHTML;
         var sel = document.getElementById("select");
         var ops = sel.options;
         for(var i=0;i<ops.length;i++) {
            if(selectText==ops[i].text) {
               sel.options[i].selected = "true"; 
            }
         }
         var f = document.getElementById("did");
         f.style.visibility="visible";
       }
    </script>
  </head>
 
  <body>
    <input type="button" value="新增" onclick="show()"></input>
    <div>
      <table border = "1" cellspacing = "0" id="tableid"  width="90%">
         <tr bgcolor="yellow">
            <th>编号</th>
            <th>名称</th>
            <th>代码</th>
            <th>机构</th>
            <th>类别</th>
            <th>操作</th>
         </tr>
         <tr>
            <td>1</td>
            <td>民生宝</td>
            <td>100021</td>
            <td>ms</td>
            <td>基金</td>
            <td>
               <input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>
               <input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>
            </td>
         </tr>
     </table>
    </div>
 <br>
    <div align="center" id="did" style="visibility:hidden">
       <form action="">
         <table>
          <tr>
      <td>标题：</td>
      <td><input type="text" id="title"></input></td>
      <td>摘要：</td>
      <td><input type="text" id="digest"></input></td>
    </tr>
  
    <tr>
      <td>作者：</td>
      <td><input type="text" id="author"></input></td>
      <td>类别：</td>
      <td align="left">
       <select id="select">
          <option>证劵</option>
          <option>基金</option>
          <option>股票</option>
       </select>
      </td>
    </tr>
   </table>
   <br>  
      <center>
         <input type="button" value="保存" onclick="insertRow_()"></input>
         <input type="reset" value="重置"></input>
      </center>
      </form>
   </div>
 </body>
</html>
以上是关于javaScript增删改查(转)的主要内容，如果未能解决你的问题，请参考以下文章
在java中对数据库进行增删改查（转）
javascript相关的增删改查以及this的理解
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段
Javascript----增删改查
JavaScript数组：增删改查排序等
[转]在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查