今天工作中需要用到這樣一個效果:table裏面排列着一些文本框,在輸入數值以後,保存table的全部html元素,包括剛輸入的數值。
這裏用jquery的html()方法很容易實現。但是測試的時候發現,在ie8和i火狐(還包括ie9,safari,谷歌瀏覽器)中,html()得到的值是不一樣的。
下面是一個小小的例子,我想大家很容易看明白:
View Code
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文檔</title> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script> function save(){ var content = $("#mytable").html(); alert(content); } </script> </head> <body> <table width="100" border="0" cellpadding="0" cellspacing="0" id="mytable"> <tbody> <tr> <td><input type="text" name="textfield"></td> </tr> <tr> <td><input type="button" name="Submit" value="保存" onClick="save()"></td> </tr> </tbody> </table> </body> </html>
點擊按鈕以後的結果如下(注意我畫框的地方):
ie8
ie9,火狐
也就是說,FF下獲得的HTML只有最原始的代碼,不包括動態插入的內容。這樣就很糾結,我不希望這樣。
至於爲什麼會這樣,也許是火狐等瀏覽器的限制?我真的不知道,有待研究,哪位大俠能告訴我,感激不盡。
現在我只能儘快想辦法解決這個問題,完成工作要求
搜索的百度,谷歌,找到一個老外寫的插件,其實是很簡單的一個方法,代碼如下:
View Code
(function($) { var oldHTML = $.fn.html; $.fn.formhtml = function() { if (arguments.length) return oldHTML.apply(this,arguments); $("input,textarea,button", this).each(function() { this.setAttribute('value',this.value); }); $(":radio,:checkbox", this).each(function() { if (this.checked) this.setAttribute('checked', 'checked'); else this.removeAttribute('checked'); }); $("option", this).each(function() { if (this.selected) this.setAttribute('selected', 'selected'); else this.removeAttribute('selected'); }); return oldHTML.apply(this); }; })(jQuery);
使用方法也很簡單,就是替換html()爲formhtml()。像這樣:
View Code
function save(){ var content = $("#mytable tbody").formhtml(); alert(content); }