Hide columns in spreadsheet/edit view (JS/jQuery/Cisar)

Question

Hiding columns in normal view is ok using either of the functions:

function hideColumn()
{ 
var header = document.querySelectorAll("[displayname="Column Name"]")[0].parentNode;
var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
header.style.display = "none";
for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
    cells[i].style.display = "none";}

}
// _spBodyOnLoadFunctionNames.push('hideColumn');

or

function hideColumns()
{ 
["col1", "col2","col3"].forEach(function(col) {
var header = document.querySelectorAll("[displayname='"+ col +"']")[0].parentNode;
var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
header.style.display = "none";
for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
    cells[i].style.display = "none";}
});
}
//  _spBodyOnLoadFunctionNames.push('hideColumns');

but when I click on Edit, the view switches to a spreadsheet/edit view with all columns.

How to keep the columns hidden in a spreadsheet view?

Answer 1

For Edit view try this:

function hideColumn()
{ 
    var header = document.querySelectorAll("th[title='Column Name']")[0];
    var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
    header.style.display = "none";
    for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
        cells[i].style.display = "none";}
}