Select columns in html table

Select column from a table with Google Chrome

Is there an extension for Google Chrome that would allow me to select a column from a table on the webpage? For example when I want to copy text from just one column of a table. You can select any row or column in Firefox by holding the Ctrl key, and I was wondering if a similar feature is available in Chrome.

9 Answers 9

Sorry to dig up an old thread, but this might help someone in the future. I wrote a Chrome extension called ColumnCopy which accomplishes this task.

Hi @thg435, no not really other than I followed the guide on developer.chrome.com/extensions/tut_analytics.html. My goal was to track to copy column vs. copy table events. That info is helpful for improving the app. You are welcome to check out the code at github.com/jamesandres/ColumnCopy and submit a pull request if you find a better approach. Thanks 🙂

+1 Great work! It solved my problem. But as hakre said, it’s better to have more features like selecting,

Another hack — copy the whole table from Chrome to Excel then copy the column. I use this to grab the stock ticker column from a stock screen.

Works using LibreOffice Calc as well.

Until the table has 25 columns and 35k rows with a total size of almost 2 MB for the full contents as text 🙂

Allows you to select columns, rows and arbitrary areas in a table and copy in different formats.

you wrote this extension? You are the best. this is by for the best extention for this purpose! 5 star

Should be voted much higher. Thanks for the shortcuts and the decent context menu, in case you forget them. Good work.

I installed and used your extension, worked on a w3schools table example page, didn’t work in the HTML table (I checked source, WAS table.) document I was trying. So I deactivated it. Tried another extension on this page in same way. After I was done, I suddenly realized my clipboard STOPPED WORKING altogether. Have to reboot! Don’t know which one it is, obviously.

Here’s a very hacky and somewhat inconvenient workaround: you can use the «Transpose Tables» bookmarklet located on this website to transpose the rows and columns of the tables on the page, and then select the appropriate row. Certainly not ideal, but it’s the best thing I was able to find.

Without installing any extension:

document.getElementsByTagName('table') 

If there is more than one, use the index for the desired table. In my case I want the first table so I use 0 as the index:

document.getElementsByTagName('table')[0] 

Define column you want (first column is 0):

And this is the final code:

Array.from(document.getElementsByTagName('table')[0].getElementsByTagName('tr')) .map(tr => tr.getElementsByTagName('td')) .filter(td => td.length > 0) .map(td => td[column].innerHTML) 

Now you have the output, which you can copy from the console, e.g. [«Item 1», «Item 2», «Item 3»]

• Alt + Click selects single cells.
• Ctrls + Click + move selects table ranges exactly like in Firefox.

Link only answer is useless, especially when it will be broken. Can you elaborate on this a little more?

You could also use either of these bookmarklets:

to copy out the data as CSV. Then paste that CSV data into excel, and click the column you want in excel and copy that.

For anyone who still has the problem, here is another chrome extension isheet you may want to try out. Unlike some other suggestions here, this extension scrapes html table into an excel like sheet from where you can easily copy the whole column. Bonus of this extension is that it not only works for standard html table but also other tabular format html elements, such as list or any periodic data structure.

Источник

[CSS] Select First Column of Table

See the demo below. The first column is selected and styled.

table class="first-column"> tbody> tr> td>(1,1)td> td>(1,2)td> td>(1,3)td> td>(1,4)td> tr> tr> td>(2,1)td> td>(2,2)td> td>(2,3)td> td>(2,4)td> tr> tr> td>(3,1)td> td>(3,2)td> td>(3,3)td> td>(3,4)td> tr> tbody> table> 

table.first-column > tbody > tr > td:nth-of-type(1)  font-size: larger; color: red; > 

We use nth-of-type CSS selector to select the first td of rach row. If you want to select n-th column, change the number from 1 to n.

You may also be interested in [CSS] Select First Row of Table

Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

Источник

jQuery select columns including colspans in a table

The following tutorial shows you how to do «jQuery select columns including colspans in a table».

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do «jQuery select columns including colspans in a table» is

for (i = 1; i < document.getElementsByTagName('tr').length * 2; i++) < console.log($('table :nth-child(' + i +') :nth-child(4)').html()); console.log($('table :nth-child(' + i + ') td[colspan="2"]').html()); >

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js" > style id="compiled-css" type="text/css"> tr :nth-child(4), tr td[colspan="2"] < color: red; background-color: gray; > td !-- w w w .d e m o 2 s . c o m--> border: 1px solid black; >  body> table cellspacing="0"> tr> td>foo td>foo td>foo td>foo td>foo td>foo  tr> td colspan="2">foo td>foo td colspan="2">foo td>foo  tr> td>foo td colspan="2">foo td>foo td colspan="2">foo   script type='text/javascript'> for (i = 1; i < document.getElementsByTagName('tr').length * 2; i++) < console.log($('table :nth-child(' + i +') :nth-child(4)').html()); console.log($('table :nth-child(' + i + ') td[colspan="2"]').html()); >   

Related

• jQuery Toggle a hidden table, by clicking Toggled (Up/Down arrow images) (Demo 2)
• Javascript jQuery on HTML Tag table col span
• jQuery Finding column index using jQuery when table contains column-spanning cells
• jQuery select columns including colspans in a table
• jQuery select columns including colspans in a table (Demo 2)
• jQuery change col-span when a data is added to html table cell
• jQuery fix padding Twitter Bootstrap cell tables when using colspan

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник