在做表單更新update時常會使用到的JQuery技術


本篇為紀錄 , 為解決
在做Form表單更新時,不換頁要做Update之狀況
在一般情況要做Update有幾種方法


1.按下編輯(Update)時將資料塞到URL,讓php或其他語言收變數
2.直接在原地表格變成input欄位,修改完直接原表單送出
3.第三種就是作者紀錄該方法,透過 JQuery將資料找到塞到我們想要的欄位裡


假設在同一頁面包含了已接收DB資料並且已塞到欄位表格中,代碼如下:

<html>

      <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
            <td>
            <button type="button" onclick="updatePanel();" >編輯</button>
            </td>
            <input type="hidden" class="hidden1" value="666"  />
      </tr>
</html>



我們想要將這些資料,在我們按下編輯(Update)時,送到編輯的欄位
讓使用者方便編輯上次已填好的資料做修改,代碼如下:

<html>
     <div class="Update Form" aria-hidden="false">
      
          <li><input type="text" name="InputField1" /></li>
          <li><input type="text" name="InputField2" /></li>
          <li><input type="text" name="InputField3" /></li>
          <input type="hidden" id="InputField4" name="old_PermID"  />
     </div>
</html>



接著是JS代碼 updatePanel 的部份,如下:

<head>

      <script type="text/javascript">

 $('table tbody').on('click', 'td button', function () {
   
   var tr = $(this).closest('tr');
          document.getElementById("InputField1").value= tr[0].cells[0].innerText;//123
          document.getElementById("InputField2").value= tr[0].cells[1].innerText;//456
          document.getElementById("InputField3").value= tr[0].cells[2].innerText;//789
          document.getElementById("InputField4").value= 
          $(this).closest('tr').find('input.hidden1').val();//666
        });
      </script>
</head>


在 table tbody 內 , 最靠近 td ul button的按紐發出onclick事件便觸發,
tr[0].cells[0].innerText; 透過類似樹狀結構找到內容,將資料塞到我們指定Id標籤

這裡注意看其實我們還有偷偷傳送一個隱藏input欄位,有一些資訊不能被使用者修改
像更新或刪除的索引值,藉著隱藏欄位傳遞,
可以透過藉由 find('input.password'),找到指定的標籤與class name,便可找到其中的值

其中的用法非常多樣化,這裡只是舉例其中部份,有興趣可以再至官網深入探討


另外要注意的是 作者發現在使用 Firefox 其他瀏覽器
底下這樣寫法造成瀏覽器不支援



tr[0].cells[0].innerText;//123

( only for chrome , IE )
而全面改用以下 , 或是將資訊利用for迴圈去繞update的html結構


 document.getElementById("InputField4").value= 
          $(this).closest('tr').find('input.hidden1').val();//666
( only for chrome , Firefox , IE )








沒有留言:

張貼留言