在浏览器中操作 HTML 表格答案

【问题标题】：Manipulate HTML Table in Browser在浏览器中操作 HTML 表格
【发布时间】：2013-03-13 07:37:39
【问题描述】：

我经常阅读图表和图形，我想知道是否有 FF 或 GC 扩展允许我以拖放类型的方式执行诸如交换行和列之类的操作。

例如，如果我想比较第 1、55、92 和 143 行中的值，是否可以重新排列表格以将这四行放在图表顶部以便于比较？

我知道我可以将它复制并粘贴到 Excel 中，我希望浏览器有解决方案。

【问题讨论】：

您可以使用 chrome 检查器来移动元素。或者你可以写一个书签来添加功能
更新后的仅javascript/非jQuery版本的答案是否为您解决了问题？

标签： javascript html firefox web firefox-addon

【解决方案1】：

火狐：

https://addons.mozilla.org/en-us/firefox/addon/tabletools2/

https://addons.mozilla.org/en-us/firefox/addon/export-to-csv/

你也可以导出到excel：

How to export html table to excel using javascript

http://www.mrkent.com/tools/converter/

但是我...突出显示我需要的内容 > cntrl c > cntrl v 到 excel 中并完成。

【讨论】：

是的，我知道我可以在 Excel 中完成，但我经常这样做，如果我可以在浏览器中完成会更容易。

【解决方案2】：

var rowIndexWanted = [4, 5];

var table1 = document.getElementById('table1');
var table1body = table1.getElementsByTagName('tbody');
var rows = table1.getElementsByTagName('tr');
var rowsWanted = [];

for(i in rowIndexWanted)
{
    rowsWanted.push(rows[rowIndexWanted[i]]);
}

for(i in rowsWanted)
{
    table1body[0].insertBefore(rowsWanted[i], table1body[0].childNodes[0]);
}

【讨论】：

不，这是我在其他人生成的网站上查看的一堆数字和统计数据。
试试上面的javascript sn-p。假设页面使用 jQuery，你可以拉出 firebug 或 chrome 调试器，然后运行代码
我尝试了代码并收到此消息 TypeError: $(...) is null [Break On This Error] $("#table1 tr")
代码 sn-p 仅在页面已经使用 jQuery 时才有效。尝试在控制台中输入jQuery 或$，看看你得到的是ReferenceError 还是function()。显然你需要用表的 id 替换 #table1 。如果表没有 id，您可以使用 firebug 或 chrome 调试器向其添加一个
我运行它并得到function()

【解决方案3】：

提示：您可以通过按住 Ctrl 键并选择单元格范围来选择单元格（至少在 Firefox 中）。

Bookmarklets from J. Ruderman 让您可以按任何列对表格进行排序、转置或对行编号。

您搜索的内容似乎类似于 Kendo 等框架提供的功能：column reordering 或 Aggregates？

【讨论】：