jQuery Manipulation of SharePoint Lists

Wooh, it's been a while. Adding a new kiddo to the family has had a ripple-effect on my online activity as I've been busy with family and catching up at work. Hopefully, I'll be able to start posting regularly again now that things are starting to become routine again.

I got an email earlier today asking about how to do some manipulation of a list in SharePoint using jQuery. As I was answering the question, it occurred to me that I had done this once before with vanilla JavaScript and I was curious to see how much less code I could write to accomplish the same thing.

Here's what I came up with:

<script src='jquery.js'></script>
<script type='text/javascript'>
var col_names = [];
var tbl_id = ''; // the id for the table that you want to manipulate goes here
tbl_id = tbl_id.replace(/{/g,'\\{').replace(/}/g,'\\}'); // cleanup to handle the curly braces
 
$(document).ready(function() {
 $('#'+tbl_id+' > tbody > tr > th').each(function() {
  if ($(this).hasClass('ms-vh-icon')) { col_names.push('Attachments'); }
  /** OTHER 'else if' statements may be required to handle future columns without text names **/
  else { col_names.push($(this).text()); }
  $(this).attr('COL',col_names[col_names.length-1]);
  $(this).attr('ROW','0');
 });
 
 var c=0;
 var r=1; // the header row is row 0
 $('#'+tbl_id+' > tbody > tr > td').each(function() {
  $(this).attr('COL',col_names[c]);
  $(this).attr('ROW',r);
  r = (c == col_names.length-1) ? r+1 : r;
  c = (c == col_names.length-1) ? 0 : c+1;
 });
 build_options();
});
 
function hide_cell() {
 /**** THIS IS A SAMPLE OF HOW TO ITERATE THROUGH THE ROWS ****/
 $('#'+tbl_id+' > tbody > tr').each(function() {
  $(this).find('[COL="'+$('#cols').val()+'"]').hide();
 });
}

</script>

This code will assign ROW and COL attributes to each cell in a given table with an id of "tbl_id". These can then be used later in the code to reference a particular cell in your code.

Enjoy