Change the background colour of a cell - not highlighting text

Question

I'm using the script editor to format my list. When I use this block of code:

function boldTemplate(ctx){
    var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    switch(value){
        case "":
            return"<span style='background-color:yellow'>"+"testing"+"</span>";
            break;
    }
}

This will highlight the text "testing" instead of making the whole cell yellow.

If my switch case looked like this:

switch(value){
    case "":
        return"<span style='background-color:yellow'>"+"</span>";
        break;
}

No colour would be displayed at all.

Is there a way to colour the cells?

Answer 1

Span is an in-line element. Change it to a div or update the style of the span to display as block. Ex:

<span style=‘display:block;width:100%;background-color:yellow’>

Answer 2

It's a normal behavior, you are trying the pass the style to the content of SPAN and when the SPAN is empty it doesn't show anything!

So try to use      for the empty SPAN! or use DIV instead with block style!

If you need to fill the list item cell itself, so try the JSLink examples at

• Change the Cell color on postrender using JSlink
• Need help changing cell background color based on the content of the cell using CSR