2009年10月10日

Javascript在頁面端檢查用戶是否修改過數據

在實現程序的修改模塊時，要在頁面端檢查用戶是否修改過數據，以便提醒用戶及時保存修改后的數據。
實現要求：
　　判斷用戶是否修改了輸入的內容，要能判斷input中的checkbox，text，radio等，不知道會多少個input，也不知道input的ID和name，要在客戶端判斷是否修改，不能產

生提交。還要同時滿足IE和firefox兩種環境。也要支持master和content頁的使用。
解決方案；
　　處理思路：在頁面加載時記錄所有的input的值或狀態，如果要求在用戶進行修改操作時立即調整控件狀態，則在數據區div上的onclick和onkeypress事件里調用檢查數據

是否改變的函數，并設置相應控件的狀態（用ha_setch())。如果是在提交或用戶手動控制檢查過程時，則在相應的操作事件中調用檢查數據是否改變（例在button的onclick

()中使用ha_checkin()控制提交)。
　　　以下是實現代碼
var ha_last=new Array;//定義一個全局的空對象，存放所有的初始值。
function ha_get()//讀取初始值
{ var ha_input = document.getElementsByTagName("input");
for (var i=0;i<ha_input.length;i++)
{
if (ha_input[i].type=="password"){ ha_last.push(ha_input[i].value);}//根本頁面需要設置type的值和對象屬性
if (ha_input[i].type=="radio") {ha_last.push(ha_input[i].checked);}//要保證檢查的范圍是否準確
}
}
window.onload=ha_get;//綁定讀取初始值的函數
function ha_checkin()//檢查新的輸入值和初始值是否相等。返回判斷結果。true為沒有發生修改，false為有修改。
{ var ha_now=new Array;
var ha_input = document.getElementsByTagName("input");
for (var i=0;i<ha_input.length;i++)
{
if (ha_input[i].type=="password"){ ha_now.push(ha_input[i].value);}//根本頁面需要設置type的值和對象屬性。
if (ha_input[i].type=="radio") {ha_now.push(ha_input[i].checked);}//也要保證和ha_get()中檢查的標簽相一致
}
if (ha_now.toString()==ha_last.toString())//沒修改
{return true;}
else//有修改
{return false;}
}
function ha_setch(){//設置相應的控件狀態
if (ha_checkin())//沒有變化
　　　//改變控件的顯示和功能狀態
else//有變化
　　　//改變控件的顯示和功能狀態
}

做了適當的修改。最后在button里面onclick直接調用

posted @ 2009-11-23 17:36 笑口常開、財源滾滾來！閱讀(558) | 評論 (0) | 編輯收藏

烈推薦：240多個jQuery插件

來自：http://www.javaeye.com/topic/304818

jQuery 是我最喜歡的一個Javascript框架，下表中包含了240+可以為jQuery愛好者們使用的插件。我斷定一定還有下表沒有包括的，如果你還知道其他的好東西，歡迎與大家分享。

posted @ 2009-11-15 15:21 笑口常開、財源滾滾來！閱讀(445) | 評論 (0) | 編輯收藏

jquery之采用斑馬線顯示數據

starterkit.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Starterkit</title>

<tr>
  <th class="{sorter:'text'}">Email</th>
  <th>Id</th>
  <th>Phone</th>
  <th>Total</th>
  <th>Ip</th>

</tr>

<tr>
  <td>henry@mountdev.net</td>

  <td>35889</td>
  <td>941-964-9543</td>
  <td>$2776.09</td>
  <td>119.232.182.142</td>
  <td>http://www.gmail.com</td>
  <td>3:54</td>

  <td>1974/1/19</td>
  <td>19/1/1974</td>
</tr>

<tr>
  <td>christian@reno.gov</td>
  <td>60021</td>

  <td>$2743.41</td>
  <td>167.209.64.181</td>
  <td>http://www.dotnet.ca</td>
  <td>10:58</td>
  <td>2000/3/25</td>

</tr>

<tr>
  <td>muffins@donuts.com</td>
  <td>17927</td>
  <td>941-964-9511</td>

  <td>http://google.se</td>
  <td>21:22</td>
  <td>1993/1/24</td>
  <td>24/1/1993</td>

</tr>

<tr>
<td>muffins@reno.gov</td>

  <td>220.222.93.171</td>
  <td>http://www.samba.org</td>
  <td>15:22</td>

  <td>1988/4/4</td>
  <td>4/4/1988</td>
</tr>
  <tr>
  <td>found@flexomat.com</td>

  <td>20953</td>
  <td>941-964-5544</td>
  <td>$575.42</td>
  <td>247.246.235.138</td>
  <td>http://gmail.com</td>
  <td>3:12</td>

  <td>http://www.flexomat.com</td>
  <td>19:11</td>
  <td>1980/7/31</td>
  <td>31/7/1980</td>

</tr>

<tr>
<td>found@flexomat.com</td>

  <td>1980/8/26</td>
  <td>26/8/1980</td>
</tr>

<tr>
  <td>muffins@reno.gov</td>
  <td>95926</td>
  <td>941-964-147</td>

  <td>http://www.flexomat.com</td>
  <td>9:50</td>
  <td>2003/4/1</td>
  <td>1/4/2003</td>

</tr>

</tbody>
</table>

</body>
</html>

custom.js

jQuery(document).ready(function() {
$.tablesorter.defaults.widgets=['zebra'];
$.tablesorter.defaults.sortList=[[0,0]];
$("table").tablesorter();
});

posted @ 2009-10-10 17:07 笑口常開、財源滾滾來！閱讀(820) | 評論 (0) | 編輯收藏

jquery之tablesorter

starterkit.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Starterkit</title>

<body>

<tr>
  <th>Email</th>
  <th>Id</th>
  <th>Phone</th>
  <th>Total</th>
  <th>Ip</th>

  <td>devo@flexomat.com</td>
  <td>66672</td>
  <td>941-964-8535</td>
  <td>$2482.79</td>
  <td>172.78.200.124</td>

<td>http://gmail.com</td>

  <td>15:10</td>
  <td>1988/12/14</td>
  <td>14/12/1988</td>
</tr>

<tr>
  <td>henry@mountdev.net</td>

  <td>35889</td>
  <td>941-964-9543</td>
  <td>$2776.09</td>
  <td>119.232.182.142</td>
  <td>http://www.gmail.com</td>
  <td>3:54</td>

  <td>1974/1/19</td>
  <td>19/1/1974</td>
</tr>

<tr>
  <td>christian@reno.gov</td>
  <td>60021</td>

  <td>$2743.41</td>
  <td>167.209.64.181</td>
  <td>http://www.dotnet.ca</td>
  <td>10:58</td>
  <td>2000/3/25</td>

</tr>

<tr>
  <td>muffins@donuts.com</td>
  <td>17927</td>
  <td>941-964-9511</td>

  <td>http://google.se</td>
  <td>21:22</td>
  <td>1993/1/24</td>
  <td>24/1/1993</td>

</tr>

<tr>
<td>muffins@reno.gov</td>

  <td>220.222.93.171</td>
  <td>http://www.samba.org</td>
  <td>15:22</td>

<tr>
  <td>mendez@gmail.com</td>
  <td>45834</td>
  <td>941-964-2575</td>

  <td>http://flexomat.com</td>
  <td>11:31</td>
  <td>1975/12/12</td>
  <td>12/12/1975</td>

</tr>

<tr>

  <td>dev@gmail.com</td>
  <td>20022</td>
  <td>941-964-4967</td>
  <td>$3296.54</td>
  <td>175.248.70.240</td>

<td>http://www.flexomat.com</td>

  <td>4:27</td>
  <td>2002/7/3</td>
  <td>3/7/2002</td>
</tr>

<tr>
  <td>foo@polyester.se</td>

  <td>55977</td>
  <td>941-964-745</td>
  <td>$2953.73</td>
  <td>222.114.227.156</td>
  <td>http://www.donuts.com</td>
  <td>23:49</td>

  <td>1977/8/4</td>
  <td>4/8/1977</td>
</tr>

<tr>
  <td>adam@aftonbladet.se</td>
  <td>38867</td>

  <td>$1949.27</td>
  <td>116.241.143.196</td>
  <td>http://flexomat.com</td>
  <td>23:35</td>
  <td>1995/7/27</td>

</tr>

<tr>
  <td>devo@donuts.com</td>
  <td>51426</td>
  <td>941-964-1234</td>

  <td>http://www.polyester.se</td>
  <td>15:17</td>
  <td>1986/1/5</td>
  <td>5/1/1986</td>

</tr>

<tr>
<td>henry@samba.org</td>

  <td>68.152.250.74</td>
  <td>http://www.flexomat.com</td>
  <td>4:36</td>

<tr>
  <td>found@dotnet.ca</td>
  <td>23986</td>
  <td>941-964-2686</td>

  <td>http://lostnfound.org</td>
  <td>5:51</td>
  <td>1993/7/22</td>
  <td>22/7/1993</td>

</tr>

<tr>

<td>http://www.google.se</td>

  <td>6:52</td>
  <td>1984/7/14</td>
  <td>14/7/1984</td>
</tr>

<tr>
  <td>found@mountdev.net</td>

  <td>03519</td>
  <td>941-964-1599</td>
  <td>$1176.48</td>
  <td>104.212.122.177</td>
  <td>http://donuts.com</td>
  <td>18:52</td>

  <td>$822.23</td>
  <td>153.63.68.208</td>
  <td>http://www.gmail.com</td>
  <td>7:53</td>
  <td>1994/7/14</td>

</tr>

<tr>
  <td>mendez@dotnet.ca</td>
  <td>90442</td>
  <td>941-964-1649</td>

</tr>

<tr>
<td>carl@donuts.com</td>

  <td>141.231.126.192</td>
  <td>http://gmail.com</td>
  <td>16:15</td>

  <td>http://samba.org</td>
  <td>8:27</td>
  <td>1991/11/24</td>
  <td>24/11/1991</td>

</tr>

<tr>

  <td>found@fish.org</td>
  <td>54635</td>
  <td>941-964-6439</td>
  <td>$1442.80</td>
  <td>108.133.231.154</td>

<td>http://dotnet.ca</td>

  <td>6:47</td>
  <td>1977/7/12</td>
  <td>12/7/1977</td>
</tr>

<tr>
  <td>found@flexomat.com</td>

  <td>20953</td>
  <td>941-964-5544</td>
  <td>$575.42</td>
  <td>247.246.235.138</td>
  <td>http://gmail.com</td>
  <td>3:12</td>

  <td>1978/6/10</td>
  <td>10/6/1978</td>
</tr>

<tr>
  <td>lost@aftonbladet.se</td>
  <td>60810</td>

  <td>$1054.39</td>
  <td>130.80.125.154</td>
  <td>http://www.samba.org</td>
  <td>15:50</td>
  <td>1978/5/18</td>

</tr>

<tr>
  <td>carl@reno.gov</td>
  <td>22666</td>
  <td>941-964-104</td>

  <td>http://www.lostnfound.org</td>
  <td>10:11</td>
  <td>1971/11/5</td>
  <td>5/11/1971</td>

</tr>

<tr>
<td>carl@donuts.com</td>

<tr>
  <td>foo@donuts.com</td>
  <td>11268</td>
  <td>941-964-208</td>

  <td>http://aftonbladet.se</td>
  <td>22:45</td>
  <td>1979/8/4</td>
  <td>4/8/1979</td>

</tr>

<tr>

  <td>devo@google.se</td>
  <td>17059</td>
  <td>941-964-2903</td>
  <td>$1404.67</td>
  <td>73.189.246.202</td>

<td>http://www.gmail.com</td>

  <td>22:28</td>
  <td>1983/4/28</td>
  <td>28/4/1983</td>
</tr>

<tr>
  <td>muffins@flexomat.com</td>

  <td>1997/4/8</td>
  <td>8/4/1997</td>
</tr>

<tr>
  <td>foo@samba.org</td>
  <td>82966</td>

</tr>

<tr>
  <td>foo@reno.gov</td>
  <td>03603</td>
  <td>941-964-8942</td>

  <td>http://www.flexomat.com</td>
  <td>19:11</td>
  <td>1980/7/31</td>
  <td>31/7/1980</td>

</tr>

<tr>
<td>found@flexomat.com</td>

<tr>
  <td>henry@lostnfound.org</td>
  <td>76453</td>
  <td>941-964-3084</td>

</tr>

<tr>

  <td>sam@aftonbladet.se</td>
  <td>36274</td>
  <td>941-964-7784</td>
  <td>$73.43</td>
  <td>114.190.194.148</td>

  <td>18:24</td>
  <td>1994/11/11</td>
  <td>11/11/1994</td>
</tr>

<tr>
  <td>dev@polyester.se</td>

  <td>15971</td>
  <td>941-964-7527</td>
  <td>$1855.18</td>
  <td>179.121.143.189</td>
  <td>http://www.flexomat.com</td>
  <td>10:25</td>

  <td>$3201.35</td>
  <td>213.186.220.205</td>
  <td>http://www.samba.org</td>
  <td>19:37</td>
  <td>1979/3/4</td>

</tr>

<tr>
  <td>devo@reno.gov</td>
  <td>52074</td>
  <td>941-964-2068</td>

</tr>

<tr>
<td>mendez@fish.org</td>

<tr>
  <td>muffins@reno.gov</td>
  <td>95926</td>
  <td>941-964-147</td>

  <td>http://www.flexomat.com</td>
  <td>9:50</td>
  <td>2003/4/1</td>
  <td>1/4/2003</td>

</tr>

<tr>

  <td>carl@donuts.com</td>
  <td>74513</td>
  <td>941-964-4507</td>
  <td>$2150.68</td>
  <td>106.175.123.125</td>

  <td>82420</td>
  <td>941-964-2134</td>
  <td>$3947.54</td>
  <td>129.78.102.122</td>
  <td>http://mountdev.net</td>
  <td>11:33</td>

  <td>1990/11/26</td>
  <td>26/11/1990</td>
</tr>

<tr>
  <td>devo@mountdev.net</td>
  <td>81905</td>

</tr>

<tr>
  <td>john@lostnfound.org</td>
  <td>93124</td>
  <td>941-964-1508</td>

  <td>http://www.mountdev.net</td>
  <td>14:38</td>
  <td>1979/12/10</td>
  <td>10/12/1979</td>

</tr>
</tbody>
</table>

</body>

custom.js

jQuery(document).ready(function() {
$("#large").tablesorter( {sortList: [[0,0], [1,0]]} );
});

posted @ 2009-10-10 16:02 笑口常開、財源滾滾來！閱讀(2028) | 評論 (0) | 編輯收藏

導航

常用鏈接

留言簿

隨筆分類

隨筆檔案

文章分類

文章檔案

必學知識

超鏈接

搜索

最新評論

閱讀排行榜

評論排行榜

2009年10月10日

文件上傳

表單驗證

Form - Select Box stuff

表單基本、輸入與、復選框等

時間，日期和顏色選取器

投票插件

搜索插件

編輯器

聲音，視頻，Flash, SVG等

圖片

Google Map

游戲

表格

圖表

邊框，圓角，背景

文本和鏈接

鼠標提示

菜單，導航欄

手風琴，幻燈片等效果

拖拽

XML XSL JSON Feeds

瀏覽器

對話框，確認窗口

CSS

DOM, Ajax 和其他插件