jQuery Rocks! – Selecting all of the text from a table column

January 11, 2011

On occasion it is nice to be able to select and copy the contents of a column from a table element. Using jQuery, this is a simple task that takes advantage of the following jQuery features:

 

• Event Handling – for the double-click of the column header
• Selectors – to determine which DOM elements to process
• Traversing – start from a TH that is double-clicked and find which column of the table it represents, then find all of the column TDs
• Iteration – process each of the TDs in a column
• Attributes – get the text for each TD, and change the TD’s Class

 

With a standard-format table, it is easy to add an event handler to the header TH element. Click here to view a simple example of a such a table. It has a header and a body, and has 4 columns.

 

The jQuery (and regular javascript) required for this task is simple enough. Here is the basic version:

 

$("th").dblclick(function() {
   resetColumnSelection();    var colData = "";

   $th = $(this);
   var colIndex = $th.index();
   $th.parents("table").find("tbody tr").each(function() {
      var $columnCell = $(this).children("td:eq(" + colIndex + ")");
      colText = $.trim($columnCell.text());
      $columnCell.addClass("highlight");
      if(colText > "") colData += ((colData > "")? ", " : "") + colText;
   });

   $("<span class='text'>Text from Selected Column:</span>" + 
     "<input type='text' class='temp' />")
       .val(colData)
       .insertAfter($th.parents("table"))
       .focus()
       .select();
});

function resetColumnSelection() {          $(".temp, .text").remove();
    $(".highlight").removeClass("highlight");
}

 

Here is an explanation of the code above. The top section is the event handler to be used for each TH found in the table. It does three actions when a TH is double-clicked:

 

1. Clears any previous column selection, using the resetColumnSelection function, and clears the colData variable.
2. Gathers all the the text from the TH column. This is the core of the task, and chains its actions together using jQuery method chaining. $(this) is the jQuery object that is the TH element that was double-clicked, and it is assigned to the $th variable for further use. $th.index() provides the index of the TH in the header row, and this is the index of the column being selected. From $th, jQuery traverses to the parent table [$th.parents(“table”)], then gets a collection of the rows in the table body [$th.parents(“table”).find(“tbody tr”)]. Each row of the table is then processed using an inline function [$th.parents(“table”).find(“tbody tr”).each(function() {});]:
   • get the column TD from the row and assign it to $columnCell[var $columnCell = $(this).children(“td:eq(” + colIndex + “)”);]
   • get the text from the column TD and assign it to colText [colText = $.trim($columnCell.text());]
   • add the highlight class to the column TD [$columnCell.addClass(“highlight”);]
   • add any non-blank column TD text to colData [if(colText > “”) colData += ((colData > “”)? “, ” : “”) +colText;]
3. Adds a display area (span and input field) to the page to show the selected text. The value of the input field shows the selected text.

 

The end result looks like this:

 

 

The source code for this post can be viewed and tested at jsFiddle.net, at this URL: http://jsfiddle.net/styson/tJcQN/.