I'm sure this is super simple, but I'm having a hard time wrapping my head around the logic of it. I have a SharePoint list of ~100 items, each item has an identifier A-C for example. I'd like to build a table with the headers A-C and create a row for each of the items in the list and put an X or color the box with that identifies the A-C option. The number of items is dynamic and can be added to and taken away so the number of rows can't be static. Basic idea below:

  1. A
  2. B
  3. C
  4. C
  5. A
  6. A etc...

enter image description here

closed as off-topic by Waqas Sarwar MVP Jan 18 at 18:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to SharePoint are off-topic here, but can be asked on Stack Overflow." – Waqas Sarwar MVP
If this question can be reworded to fit the rules in the help center, please edit the question.


It's all about knowing your identifiers index within the table, so let us suppose we don't know how much identifiers exist and at which index they are placed in, we will retrieve those informations like so: (table first line contains identifiers, every cell contains one identifier.)

var t = document.querySelector('#myTable');
var identifiers = Array();
[].forEach.call( t.rows[0].cells, function(el) {

Before we go further, we need some data:

var items = Array({id: 1, identifier: 'A'}, 
    {id: 2, identifier: 'C'}, 
    {id: 3, identifier: 'B'}, 
    {id: 4, identifier: 'C'}, 
    {id: 5, identifier: 'A'}, 

Therafter, we will insert rows into our HTMLtable, and while adding cells we will have to check if current cell (being added) position is the same as current item's identifier index that we got from table first line:

items.forEach(function(item) {
    var row = t.insertRow(-1);
    row.insertCell(0).innerHTML = item.id;
    // We add as many cell as we have identifiers (columns)
    for(var i=1;i<identifiers.length;i++) // First cell stores item ID
        row.insertCell(i).innerHTML = identifiers.indexOf(item.identifier) == i ? 'X' : '';

Here is a working jsfiddle if you want to try this out.

  • Cool!! i needed to make a few mods to get it to work with the REST query to the SharePoint list, but this absolutely got me there with a little fiddling. Thanks so much!! – Chuck.M Jan 18 at 19:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.