本篇為紀錄 , 為解決
在做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 )
document.getElementById("InputField4").value= $(this).closest('tr').find('input.hidden1').val();//666( only for chrome , Firefox , IE )
