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

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

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

INPUTTYPE=buttonvalue=復(fù)制測(cè)試表格onclick=CopyTable

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

測(cè)試

TABLEid=oTable

TR

TD測(cè)試表格/TD

TD測(cè)試表格/TD

/TR

TR

TD測(cè)試表格/TD

TD測(cè)試表格/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;//復(fù)制

functionPastClipboardData

editor.focus;

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

//--

/SCRIPT

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

INPUTTYPE=buttonvalue=選中測(cè)試表格onclick=CopyTable

測(cè)試

TABLEid=oTable

TR

TD測(cè)試表格/TD

TD測(cè)試表格/TD

/TR

TR

TD測(cè)試表格/TD

TD測(cè)試表格/TD

/TR

/TABLE文字

SCRIPTLANGUAGE=JavaScript

!--

functionCopyTable

vartxt=document.body.createTextRange;

txt.moveToElementTextoTable;

txt.select;

//--

/SCRIPT

類似于這樣的問(wèn)題，可以想想以前有無(wú)寫過(guò)見過(guò)類似的'