Using jQuery to hide some columns, append a new column, and popup the contents of the hidden columns

In this previous post, I showed how to hide the 4th and 5th columns of a SharePoint List (I am not talking about EditForm.aspx page, I am talking about the table view). I took this a step further and appended a new row containing an “more info” onClick event that pops up the contents of the hidden columns.

$('td:nth-child(5),th:nth-child(5),td:nth-child(6),th:nth-child(6)').hide()
$('td:nth-child(4)').each(function(){
	$(this).after('<td><img id="MoreInfo" src="/_layouts/images/CNSINF16.GIF" /></td>');
});
$('td.ms-addnew').hide();
$('tr.ms-itmhover').removeClass('ms-itmhover');
$('a[href^="mailto:"]').contents().unwrap();
$('img#MoreInfo').click(function() {
  var notes = $(this).closest('td').next('td').text();
  var description = $(this).closest('td').next('td').next('td').text();
  $('<div><u>Notes</u>: ' + notes+ '<br/><u>Description</u>: '+description +'</div>').dialog()
  });
});

Line 1: hides the 4th and 5th columns
Lines 2 & 3: append a new columns with a clickable gif
Lines 5 & 6: hide the add new and the hoverovers for the rows
Line 7: removes the mailto(s)
Lines 8 – 11: is the onClick for the gif in line 3. This function takes the values of the next two rows and put them in a jQuery modal dialog.

That was fun.