根据每行第三列的内容将一个大表拆分为两个表答案

【问题标题】：Split one big table into two tables based on content of third column in each row根据每行第三列的内容将一个大表拆分为两个表
【发布时间】：2014-07-09 14:35:46
【问题描述】：

是否有可能有一个用于greasemonkey 的脚本，它会根据一列将页面上的一个表拆分为两个不同的表？所以例如我有表：

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

【问题讨论】：

当然有可能——编写一个 javascript 脚本（jquery 库会很有帮助）。
但是我不知道该怎么做，请你帮帮我吗？
你有使用 javascript 的经验吗？如果没有，我建议先在谷歌上搜索一些好的 javascript 教程和书籍，然后学习基础知识。
是的，我有 javascript 的基本知识，更好的说是“被动”知识，当我看到代码时我知道它在做什么。
Geril - 我的答案已被编辑 - 现在你有工作脚本，需要“抛光”。 :) 它是一分为二的表，但新表的内容不是动态的。你必须自己做。

标签： javascript jquery html html-table greasemonkey

【解决方案1】：

从这个问题合并@Dharmang 的答案：jQuery split a table into two tables at a particular row number

还有我自己的油猴脚本：

我可以给你一个greasemonkey脚本定义的预览，但它没有被检查，我不知道这是否能确定（javascript代码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();

});

编辑：

下面的代码在http://www.w3schools.com/css/css_table.asp工作页面加载后 3 秒后，它会将表格拆分为两个（粉红色背景是您的第二个表格）-您只需复制表格内容并替换为拆分值。我不会为你做任何事！

// ==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);
});

【讨论】：