是否可以使用greasemonkey的脚本将页面上的一个表拆分为一个列的2个不同的表?例如,我有表:
Is it possible to have a script for greasemonkey that will split one table on a page into 2 different tables on the basis of one column? So for example I have table:
<table> <tr> <td>Jill</td> <td>Smith</td> <td>Option 1</td> <td>5050</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>Option 2</td> <td>2353</td> </tr> <tr> <td>John</td> <td>Elve</td> <td>Option 1</td> <td>94</td> </tr> </table>我希望得到的结果是:
<h2>Table for Option 1</h2> <table> <tr> <td>Jill</td> <td>Smith</td> <td>Option 1</td> <td>5050</td> </tr> <tr> <td>John</td> <td>Elve</td> <td>Option 1</td> <td>94</td> </tr> </table> <h2>Table for Option 2</h2> <table> <tr> <td>Eve</td> <td>Jackson</td> <td>Option 2</td> <td>2353</td> </tr> </table>推荐答案
从这个问题中合并@Dharmang的答案: jQuery将表拆分为两个表行号
Merging answer of @Dharmang from this question: jQuery split a table into two tables at a particular row number
和我自己的油脂猴脚本:
and my own grease monkey script:
我可以给你一个预览greasemonkey脚本定义,但它没有检查,我不知道这是否可行(javascript代码是100%正确):
I can give You a preview of greasemonkey script definition but it's not checked and i don't know if this will work for sure (javascript code is correct for 100%):
// ==UserScript== // @name script // @namespace page.that.script.will.be.runned.at // @description DESCRIPTION!!! // @include page.that.script.will.be.runned.at/SOME_PAGE_THAT_SCRIPT_WILL_BE_ACTIVE/* // @require ajax.googleapis/ajax/libs/jquery/1.7.2/jquery.min.js // @require raw.github/tomgrohl/jQuery-plugins/master/jcookie/script/jquery.jcookie.min.js // @version 1 // ==/UserScript== $(function(){ console.log('WE HAVE A LIFT OFF!!!! :D SCRIPT IS RUNNING '); // YOUR JAVASCRIPT CODE HERE // YOU HAVE JQUERY INCLUDED var $mainTable = $("table"); var splitBy = 5; var rows = $mainTable.find ( "tr" ).slice( splitBy ); var $secondTable = $("table").parent().append("<table id='secondTable'><tbody></tbody></table>"); $secondTable.find("tbody").append(rows); $mainTable.find ( "tr" ).slice( splitBy ).remove(); });
编辑:
以下代码适用于 www.w3schools/ css / css_table.asp 页面加载后3秒后,它会将表格拆分为两个(PINK背景是你的第二个表格) - 你只需要复制表格内容并用分割值替换。我不会为你做任何事!
The code below works at www.w3schools/css/css_table.asp After 3 second after page load it will split the table for two (the PINK background is Your second table) - You only have to copy table content and replace with splitted values. I WON'T DO ANYTHING FOR YOU!
// ==UserScript== // @name TABLE SPLITTER // @namespace www.w3schools/ // @description DESCRIPTION!!! // @include www.w3schools/css/css_table.asp // @require ajax.googleapis/ajax/libs/jquery/1.7.2/jquery.min.js // @require raw.github/tomgrohl/jQuery-plugins/master/jcookie/script/jquery.jcookie.min.js // @version 1 // ==/UserScript== $(function(){ // YOUR JAVASCRIPT CODE HERE // YOU HAVE JQUERY INCLUDED setTimeout(function(){ var mainTable = $("table"); var splitBy = 3; var rows = mainTable.find ( "tr" ).slice( splitBy ); var secondTable = $("<table id='secondTable' style='background:pink;'><tbody></tbody></table>").insertAfter("table"); secondTable.find("tbody").append(rows); console.log(secondTable); mainTable.find ( "tr" ).slice( splitBy ).remove(); }, 3000); });更多推荐
根据每行第三列的内容将一个大表拆分为两个表
发布评论