Today, someone asked me a question: How to copy a table on a Web page through a JS script? It seems to be more difficult, but it is done, and the process of solving the problem is recorded, hoping to be helpful to the brothers who write the script.
No such script has been written before, but I just saw a script that could implement the full selection of the HTML editor, and then came up with a scenario where you can use a script to insert the table into the HTML editor, and then select the HTML Editor's contents and execute the HTML editor's copy command to implement the Copy table function , soon buttoned up:
<input type= "button" value= "Copy Test table" onclick= "copytable ()" > <input type= "button" value= "Output the Clipboard contents to the editor" Onclick= "Pastclipboarddata ()" > Test <table border= "1" id= "otable" > <TR> <TD> Test Form </TD> ; td> Test Form </TD> </TR> <TR> <TD> Test form </TD> <TD> Test form </TD> </TR> </ table> text <iframe id= "editor" src= "About:blank" ></iframe> <script language= "JavaScript" > <!-- function copytable () {copyhtmlelement (otable)} function copyhtmlelement (obj) {Editor.document.designMode = ' On '; Turn an IFRAME into an editable mode, the HTML editor editor.document.write ("<body></body>"); Initialize Editor Editor.document.body.innerHTML = obj.outerhtml; Editor.document.body.createTextRange (). Select (); Select all content in the editor editor.document.execCommand ("copy", "", null); copy} function Pastclipboarddata () {editor.focus (); Editor.document.execCommand ("Paste", "", null); Paste}//--> </scripT>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This function is implemented, but feel a bit uncomfortable, you must use the HTML editor, but from the full selection of HTML editor in the code, notice the createTextRange () method, this method has been useful before, but has not been thoroughly studied. Found in MSDN that only objects such as body, textarea, and so on support the createTextRange () method, continue to be looked up in MSDN, createTextRange () returns a TextRange object, continues to consult TextRange object, found that there are many methods, first tried FindText method, found only text, can not select the object, continue to find, finally found Movetoelementtext is the way we are looking for:
<input type= "button" value= "Selected Test form" onclick= "copytable ()" > Test <table border= "1" id= "otable" > <TR> & Lt td> Test form </TD> <TD> Test form </TD> </TR> <TR> <TD> Test form </TD> <TD> Test form ;/td> </TR> </TABLE> text <script language= "JavaScript" > <!--function copytable () {var txt = Document.body.createTextRange (); Txt.movetoelementtext (otable); Txt.select (); }//--> </SCRIPT>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Similar to such a problem, you can think of the past has been written to see similar code, if not also can be used to search the Internet keyword, directly using existing knowledge to solve. MSDN is a very good treasure trove, like the primary School Chinese dictionary, from which you can find the vast majority of the information needed. In response to that sentence, their own hands and clothing:
