Split one big table into two tables based on content of third column in each row

问题

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>

And what I want to have as result is:

<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>

回答1:

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:

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   http://page.that.script.will.be.runned.at
// @description DESCRIPTION!!!
// @include     http://page.that.script.will.be.runned.at/SOME_PAGE_THAT_SCRIPT_WILL_BE_ACTIVE/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://raw.github.com/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();

});

EDIT:

The code below works at http://www.w3schools.com/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   http://www.w3schools.com/
// @description DESCRIPTION!!!
// @include     http://www.w3schools.com/css/css_table.asp
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://raw.github.com/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);
});

来源：https://stackoverflow.com/questions/23774929/split-one-big-table-into-two-tables-based-on-content-of-third-column-in-each-row

标签

javascript

jquery

html

html-table

greasemonkey