javaScript增刪改查(轉)_ZenDei技術網路在線

javaScript增刪改查(轉)

-Advertisement-

轉自CSDN: ...

轉自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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

近期前端中的一些常見的面試題

近段時間看了不少的前端面試題，很多大牛也對此做了整理。這篇文就算是借花獻佛啦。總體來說基本上每家問的問題也差不多，可能不同業務的公司問的問題的側重點也不太一樣，有的側重於移動端適配CSS佈局瀏覽器相容IE hack，而有的側重於JS邏輯面向對象設計模式考察等。可能將實際工作中會遇到的問題的場景，以及 ...
JavaScript對象類型之簡單介紹

引言對象是JavaScript的基本數據類型。對象是一種複合值：將很多值(原始值或者其他對象)聚合在一起，通過名字訪問這些值。對象可以看做屬性的無序集合，每個屬性都是一個名/值對。屬性名是字元串。對象還可以看做字元串到值的映射。除了可以保持自有的屬性，對象還可以從一個稱為原型的對象繼承屬性 ...
ios獲取數據之encodeURI 和 decodeURI

在APP開發過程中，免不了要進行ios的數據處理，在ios傳遞數據的過程中，會出現JSON數據獲取不到的情況，這時候就輪到encodeURI 和 decodeURI出馬了。 ...
js實現圖片粘貼上傳到伺服器並展示

最近看了一些有關於js實現圖片粘貼上傳的demo,實現如下: (這裡只能檢測到截圖粘貼和圖片右鍵複製之後粘貼) demo1: demo2: 註意:因為只支持右鍵複製圖片,所以並不能一下複製兩張圖片,所有圖片複製並粘貼上傳待研究. html: 介面返回數據格式: 參考部分:http://www.jb5 ...
JS正則表達式驗證

驗證數字的正則表達式集驗證數字：^[0-9]*$ 驗證n位的數字：^\d{n}$ 驗證至少n位數字：^\d{n,}$ 驗證m-n位的數字：^\d{m,n}$ 驗證零和非零開頭的數字：^(0|[1-9][0-9]*)$ 驗證有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$ 驗證有1-3位 ...
Linked list of js

/* * 單向鏈表 * Node 類用來表示節點 * LinkedList 類提供了插入節點、刪除節點、顯示列表元素的方法，以及其他一些輔助方法。 */ function Node(element) { this.element = element; this.next = null; }; fun... ...
vue2.x 時間範圍 date range timepicker。只在項目中使用elementUI的date-picker

elementUI官方案例：http://element.eleme.io/#/zh-CN/component/date-picker （1）效果圖：（2）安裝和引入（3）到自己的組件demo.vue里使用： ...
CSS01、使用DIV+CSS重構網頁

前言在之前的html相關的介紹中，我們已經學習了使用table來佈局網站的首頁，但是使用這種方式來佈局的話有一些缺陷，所以筆者這裡就介紹一下如何使用DIV+CSS來對網站的首頁進行佈局！一、DIV的相關介紹 Div 它是一個 html 標簽，一個塊級元素(單獨顯示一行)。它單獨使用沒有任何意義， ...