jQuery append values in table row cells using nth-child() Selector

How to use jQuery to append values in table row cells using nth-child() Selector syntax

Just a short post explaining how to use a jQuery syntax I had some trouble figuring out –


The scenario: I used client object model to get values from a SharePoint List, and I wanted to append each item’s title in an existing html table row cell, the table cells in my row did not have a unique class or id, so I wanted to loop through all of the table cells in that specific row and append my list items titles cell after cell by their order.
After a quick Google search I found the jQuery :nth-child() Selector syntax, but all the examples on the jQuery page showed how to append values to a ‘UL-LI’ or ‘Div’ elements.
So it took me a bit more searching and trying to find the right syntax –

In order to append values to cells in a table row:
{code type=html}
$(“tr td:nth-child(num)”).append(myVar);
{/code}

Appending values to cells in a table row by its class or id:
{code type=html}
$(“tr.myTRclass td:nth-child(num)”).append(myVar);
$(“tr#myID td:nth-child(num)”).append(myVar);
{/code}

And the full code I used to loop through the table cells after getting my SharePoint list values:
{code type=html}

                 

{/code}

That’s all folks!

SharePoint 2010 Client Object Model and jQuery calendar events carousel

Hi! First of all if you’ve never used Client object model before and you’re not very experienced with JavaScript and usually create only codeless SharePoint solutions, keep reading and try to deploy this one! I promise you it is quite simple and you don’t need visual studio or even SharePoint designer (although I recommend to do use it!) to create neat client object model solutions, here is a nice article about COM I stumbled upon – Patric Much COM Introduction.
And about my solution, I’ve created a jQuery Carousel displaying the last five events created in a calendar list, I’ve used this nice jQuery Roundabout by FredHQ.
Along with a simple client object model code to create it.


To deploy this solution on your site all you have to do is copy it into a content editor or html form web part, but I recommend deploying it this way:
1. Open SharePoint Designer and create a new Html file in your site assets library, copy the code onto it and check in your page, then simply copy the of this HTML file to the content link slot in a content editor web part, this way it will be easier to modify your code in SharePoint designer using highlights and intellisense.
2. Download the jQuery and the roundabout jQuery code sheets, upload them to your SharePoint library, and update the references to them on your html file.
3. In the code change the Calendar list name to your own.
That’s all!
Here is the code –
{code type=html}





{/code}