Manipulate HTML Table in Browser

Question

I do a lot of reading of charts and graphs, and I was wondering if there was a FF or GC extension that allows me to do things like swap rows and columns in a drag and drop type fashion.

For example, if I want to compare the values in Rows 1, 55, 92 and 143, is there a way I can rearrange the table to put those four rows at the top of the chart for easy comparison?

I know I could probably copy and paste it into Excel, I was hoping that there was a solution with the browser.

You can use the chrome inspector to move elements around. Or you could write a bookmarklet to add the functionality — , Mar 12 '13 at 20:55
did the updated javascript only/non jQuery version of the answer solve the problem for you? — NoodleFolk, Mar 13 '13 at 16:18

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

Firefox:

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

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

You can also export to excel:

How to export html table to excel using javascript

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

I however... highlight what I need > cntrl c > cntrl v into excel and done.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 12 '13 at 21:40

RandomUs1r

4,010
1
24
44

Yeah, I know I can do it in Excel but I do it so often it would be easier if I could do it in the browser. – user532493 Mar 12 '13 at 22:05

NoodleFolk · Answer 2 · 2013-03-12T23:12:08.243

0

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]);
}

edited Mar 12 '13 at 23:12

answered Mar 12 '13 at 21:27

NoodleFolk

1,949
1
15
24

No, it is a bunch of numbers and statistics I view on a site generated by someone else. – user532493 Mar 12 '13 at 21:31
try the above javascript snippet. assuming the page is using jQuery, you can just pull up firebug or chrome debugger, and run the code – NoodleFolk Mar 12 '13 at 21:49
I tried the code and got this message TypeError: $(...) is null [Break On This Error] $("#table1 tr") – user532493 Mar 12 '13 at 22:04
the code snippet only works if the page is already using jQuery. try typing `jQuery` or `$` in the console, and see if you get `ReferenceError`, or `function()`. And obviously you need to replace #table1 with the id of the table. if the table doesn't have an id, you can add one to it using firebug or chrome debugger – NoodleFolk Mar 12 '13 at 22:06
I ran it and got `function()` – user532493 Mar 12 '13 at 22:10
did you replace `table1` with the actual id of the table? – NoodleFolk Mar 12 '13 at 22:11
the table doesn't have a name – user532493 Mar 12 '13 at 22:16
you can add an id to the table by right clicking on the table and Inspect Element in FireBug, find the `` tag, right click it, and edit html, and add an `id='MyTable'` to the `
` tag
– NoodleFolk Mar 12 '13 at 22:19
I gave the table the ID of "table1" because that's how you had it in your original code. I got the error `ypeError: $(...).filter is not a function [Break On This Error] .filter(function(index){` – user532493 Mar 12 '13 at 22:25
lol,, maybe the page doesn't have jQuery after all. try the pure javascript version above – NoodleFolk Mar 12 '13 at 22:58
You can [jQuerify](http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet) a page – FelipeAls Mar 12 '13 at 23:18

score 0 · Answer 3 · answered Mar 12 '13 at 23:37

Tip: you can select cells (in Firefox at least) by maintaining the Ctrl key pressed and selecting range of cells.

Bookmarklets from J. Ruderman let you sort a table by any column, transpose it or number the rows.

What you're searching seems similar to functionalities offered by frameworks like Kendo: column reordering or Aggregates?

Manipulate HTML Table in Browser

3 Answers3