通過java script腳本復制網(wǎng)頁上的一個表格

本文格式為Word版，下載可任意編輯——通過javascript腳本復制網(wǎng)頁上的一個表格通過javascript腳本復制網(wǎng)頁上的一個表格

今天有人問我一個問題：如何通過js腳本復制網(wǎng)頁上的一個表格？看起來貌似對比有難度，不過還是搞定了，順便把解決這個問題的過程記錄下來，夢想能對寫腳本的兄弟們有所扶助。

以前沒有寫過這種腳本，不過想起來前不久剛看到一個腳本可以實現(xiàn)全選HTML編輯器的內(nèi)容，于是想到一個方案：使用腳本將該表格插入HTML編輯器中，然后全選HTML編輯器內(nèi)容，執(zhí)行HTML編輯器的復制命令，即可實現(xiàn)復制表格功能，很快搞定：

INPUTTYPE=buttonvalue=復制測試表格onclick=CopyTable

INPUTTYPE=buttonvalue=將剪切板內(nèi)容輸出到編輯器中onclick=PastClipboardData

測試

TABLEid=oTable

TR

TD測試表格/TD

TD測試表格/TD

/TR

TR

TD測試表格/TD

TD測試表格/TD

/TR

/TABLE文字

iframeid=editorsrc=about:blank/iframe

SCRIPTLANGUAGE=JavaScript

!--

functionCopyTable

CopyHtmlElementoTable

functionCopyHtmlElementobj

editor.document.designMode=On;//將iframe變成可編輯模式,即HTML編輯器

editor.document.writebody/body;//初始化編輯器

editor.document.body.innerHTML=obj.outerHTML;

editor.document.body.createTextRange.select;//選中編輯器內(nèi)全體內(nèi)容

editor.document.execCommandcopy,,null;//復制

functionPastClipboardData

editor.focus;

editor.document.execCommandpaste,,null;//粘貼

//--

/SCRIPT

這樣子功能是實現(xiàn)了，不過覺得有點不爽，務必借助HTML編輯器才可，不過從全選HTML編輯器的代碼中，留神到了createTextRange方法，這個方法以前就有用過，只是一向沒深入研究過。在Msdn中察覺只有Body、TextArea等對象支持createTextRange方法，持續(xù)在msdn中留心查閱了一下，createTextRange返回的是一個TextRange對象，持續(xù)查閱TextRange對象，察覺其有好多方法，先試了試findText方法，察覺只能選中文字，不能選中對象，持續(xù)找，終究察覺了moveToElementText就是我們要找的方法：

INPUTTYPE=buttonvalue=選中測試表格onclick=CopyTable

測試

TABLEid=oTable

TR

TD測試表格/TD

TD測試表格/TD

/TR

TR

TD測試表格/TD

TD測試表格/TD

/TR

/TABLE文字

SCRIPTLANGUAGE=JavaScript

!--

functionCopyTable

vartxt=document.body.createTextRange;

txt.moveToElementTextoTable;

txt.select;

//--

/SCRIPT

類似于這樣的問題，可以想想以前有無寫過見過類似的'