How do I edit colum in SharePoint Online using JavaScript?

Question

Hope you're well;

What is javaScript code to add on SharePoint list for showing a few lines of text per row so they all the same size where reams of text have been written this is via scroll or expand arrow can it be applied to all views.

This is code I use:

<script>


 if(typeof jQuery=='undefined'){ 
 var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
 document.write('<script src="',jQPath,'"><\/script>'); 
 } </script><style>

.expandText {
  HEIGHT: auto
 }
 .collapseText {
  OVERFLOW: hidden; HEIGHT: 18px
 }</style><script>


 function ExpGroupRenderData(htmlToRender, groupName, isLoaded) { 
 $("#tbod"+groupName+"_").attr("isloaded",isLoaded) 
 .html(htmlToRender) 
 .show("fast",collapseText("#tbod"+groupName+"_")); 
 } 
 function collapseText(group){ 
 if (!group) group = "#MSO_ContentTable"; 
 var html = "<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>"; 
 $(group+" td.ms-vb2>div").each(function(i,e){ 
 $(e).css({display:"inline-block"}); 
 if (e.clientHeight > 35){ 
 $(e).toggleClass("collapseText") 
 .prepend(html); 
 } 
 }); 
 $(group+" img[alt='collapseText']").click(function(event){ 
 $(event.target).parent().toggleClass("collapseText"); 
 }); 
 } 
 $(function() { 
 collapseText(); 
 }); 

</script>

However it works on SP 2010 using content editor web part on a list. But on SP Onnline it don't work.

<style type="text/css">
.collapseText {
    OVERFLOW: hidden; 
    HEIGHT: 18px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 
    collapseText(); 
}); 

function collapseText(){     
    var html = "<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>"; 
    $(".ms-listviewtable td.ms-vb2>div").each(function(i,e){ 
        $(e).css({display:"inline-block"}); 
        if (e.clientHeight > 35){ 
            $(e).toggleClass("collapseText").prepend(html); 
        } 
    }); 
    $(".ms-listviewtable img[alt='collapseText']").click(function(event){ 
        $(event.target).parent().toggleClass("collapseText"); 
    }); 
} 
</script>

I have tried this code it works in SP2010 but not SP Online.

Answer 1

I would start by testing of this jQuery selector is still valid.

$(".ms-listviewtable td.ms-vb2>div")

SharePoint online in classic mode is based on SharePoint 2013 and not SharePoint 2010. I'm reasonably sure that there are HTML and css class changes between these products.

This is the exact reason why you should be careful with UI customizations. They tend to be break with updates.