點擊編輯table變為可編輯狀態

簡單描述：開發中遇到一個小困難，table展示的數據，需要是可編輯的，點擊編輯按鈕，頁面table可以進行編輯，編輯完成后，點擊保存數據就保留下來~~~ 

思路：用一個帶有input的表去替換不帶input的表，用show和hide來實現

代碼：

//html代碼
<div class="btn-group">
   <button class="btn sbold green" id="edit" onclick="">
　　　　<span class="ladda-label">編輯</span>
   </button>
</div>
<div class="btn-group">
    <button class="btn sbold green" id="save" onclick="">
　　　　<span class="ladda-label">保存</span>
    </button>
</div>

               <form action="" class="horizontal-form" method="post" id="saveForm" autocomplete="off">
                   <table class="table table-striped table-bordered table-hover table-checkable order-column"
                          id="table1">
                       <thead>
                       <tr >
                           <th>序號</th>
                           <th>編號</th>
                           <th>名稱</th>
                           <th>編碼</th>                
                       </tr>
                       </thead>
                       <tbody>
                       <tr th:each="list : ${fileList}"  class="trs find">
                           <td class="dbclicktd" th:text="${list.temp_id}">序號</td>
                           <td class="dbclicktd" th:text="${list.temp_number}">編號</td>
                           <td class="dbclicktd" th:text="${list.temp_name}">名稱</td>
                           <td class="dbclicktd" th:text="${list.temp_code}">編碼</td>                           
                       </tr>
                       </tbody>
                   </table>

                   <table class="table table-striped table-bordered table-hover table-checkable order-column"
                          id="tableto">
                       <thead>
                       <tr >
                           <th>序號</th>
                           <th>合同編號</th>
                           <th>企業名稱</th>
                           <th>企業編碼</th>
                       </tr>
                       </thead>
                       <tbody>
                       <tr id="editExcel" th:each="list : ${rightsFailList}"  class="trs editExcel">
                           <td class="dbclicktd"><input th:value="${list.temp_id}" name="temp_id"/></td>
                           <td class="dbclicktd"><input th:value="${list.temp_number}" name="temp_number"/></td>
                           <td class="dbclicktd"><input th:value="${list.temp_name}" name="temp_name"/></td>
                           <td class="dbclicktd"><input th:value="${list.temp_code}" name="temp_code"/></td>
                       </tr>
                       </tbody>
                   </table>
               </form> 

 

//js代碼
$(function () {
    var info=$("#table1_info").val();
    $("#tableto").hide();
    $("#tableto_info").hide();
    $("#tableto_length").hide();
    $("#tableto_paginate").hide();
    $("#tableto_wrapper").hide();   
});

$("#edit").click("click", function () {
    $("#tableto").show();
    $("#tableto_info").show();
    $("#tableto_length").show();
    $("#tableto_paginate").show();
    $("#tableto_wrapper").show();
    $("#table1").hide();
    $("#table1_info").hide();
    $("#table1_length").hide();
    $("#table1_paginate").hide();
    $("#table1_wrapper").hide();
    var info=$("#table1_info").text();
    $("#tableto_info").html(info);
}); 

$("#save").click("click", function () {
    var ri=JSON.stringify(riList);
    var obj = JSON.stringify($("#saveForm").serializeJson());
    var searchServPath = "/sys/chas/aimCont";
      var html = $("#topli").html();
      var tb = $("#loadhtml");
      tb.html(CommnUtil.loadingImg());
     tb.load(rootPath + searchServPath,{objJson:obj,riJson:ri}, function () {
          $("#topli").html(html);
      });

}); 

 點擊保存后可以把修改后的數據傳遞到后台做一些處理，然后通過Model或者ModelMap的addAttribute()方法在返回回來。

總結：就是用兩張table進行相互的顯隱替換，從而實現table的可編輯。