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:
Appending values to cells in a table row by its class or id:
And the full code I used to loop through the table cells after getting my SharePoint list values:
That’s all folks!
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.
Here is the code –