Description:

Before I begin, just wanted to say this is my first attempt at creating a jQuery plugin and a google opensource project for that matter. So if you have any suggestions, constructive criticism, or just want to join the project and help out, then please let me know!

Many developers who have worked with SharePoint realize that it likes to generate alot of nested tables, and my first goal is to write a jQuery plugin that will cleanup these tables by converting them to simple unordered lists. As this project grows we will tackle other useless markup generated by SharePoint. Simplifiying the markup obviously will help developers, designers and integrators with styling.

Usage:

The current alpha snippet just converts tables in Content Query WebParts into clean unordered lists. Below are brief instructions:

1. Reference the jQuery library.
2. Reference the spcleanup.jquery.js file.
3. Call spcleanup on load like this example: $("body").spcleanup();

Here's an example of what you need to include between the HEAD tags:

<style>
  ul.cqwp a {
    color: #cc0000;
    font-size: 16px;		
    }
</style>

<script src="http://www.stevenng.net/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.stevenng.net/js/spcleanup.jquery.js"type="text/javascript"></script>
	
<script>
  $(function(){
    $("body").spcleanup();
  });
</script>

Example:

BEFORE: Content Query Webpart markup generated by SharePoint:

<table id="cbqwp" class="cbq-layout-main" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td id="column" valign="top" width="100%">
        <div id="linkitem" class="item">
	  <div class="link-item">
	    <a href="http://www.greenerist.com" target="" title="">greenerist</a>
	    <div class="description">An eco-friendly site</div>
	  </div>
        </div>
      </tr>
  </tbody>
</table>

AFTER: Here's the same markup after spcleanup:

<ul class="cqwp">
  <li>
    <a href="http://www.greenerist.com" target="" title="">greenerist</a>
    <div class="description">An eco-friendly site</div>
  </li>
</ul>