Hiding columns load performance

We have a hide column function that takes a long time to load the data. TECHNIQUE 1 below is slightly faster than TECHNIQUE 2 but they are both too slow. Any suggestions on how to increase the load performance for hiding columns?



function hideColumn(count,str) {
  var layoutName = getLayoutName(count);
  if (layoutName == false) return false;
  var tableLayout = document.getElementById(layoutName + "-table");
  if (!tableLayout) return;

  var col = -1;
  //Find the column with str as its header
  for (var c=0; c<tableLayout.rows[0].cells.length; c++) {
    var str1 = tableLayout.rows[0].cells[c].innerText;
    //strip trailing blanks
    while (str1.substring(str1.length-1,str1.length) == ' ') str1 = str1.substring(0,str1.length-1);
    if (str1 == str) {
      col = c + 1;
      break;
    }
  }
  if (col < 0) return;

  var maxRow;
  if (footRow > -1 ) {
    maxRow = footRow - 1;
  } else if (aggrRow > -1 ) {
     maxRow = aggrRow;
  } else {
    maxRow = tableLayout.rows.length;
  }


  for (var row = 1; row<=maxRow; row++) {
//        tableLayout.rows[row-1].deleteCell(col-1);       //TECHNIQUE 1
        tableLayout.rows[row-1].cells(col-1).style.display='none';   //TECHNIQUE 2
  }


}



C_J_LAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
0h4crying0utloudConnect With a Mentor Commented:

Another suggestion:  switch the class name of a colgroup column:

<style>
.notShown {
 color:red;
 display:none;
}
</style>

<body>

<table>
<colgroup>
  <col id='c0' >
  <col id='c1' >
  <col id='c2' >
</colgroup>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
</table>

</body>

<script>
document.getElementById('c2').className = "notShown";
</script>
</html>
0
 
0h4crying0utloudCommented:

//Find the column with str as its header

this i 0(n2) why is it needed? what are you tring to do here?
0
 
0h4crying0utloudCommented:

I see find the column and hide all it's cells...
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
0h4crying0utloudCommented:


Instead of finding the str can you just set the colum's id to that string and use getElementByid instead?
0
 
C_J_LAuthor Commented:
>Instead of finding the str can you just set the colum's id to that string and use getElementByid instead?

That part runs very fast. The slow part is the hiding or deleting of the cells.

The table has no cols or col groups defined. The table must be formatted via javascript as it is already generated and I manipulate it after the fact. I wish I had access to the html but I don't.

How would I create columns and group for this table using javascript?:

<table id="Layout1-table" class=SAPBEXCellspacing cellSpacing=1 cellPadding=0 border=0 >
     <tr id="Layout1-1-row">
     <td id="Layout1-1-1-cell" colspan="1" nowrap class="SAPBEXchaText">
           <span id="Layout1-1-1" ct="TextView" class="urTxtStd urVt1" style="white-space:nowrap;">Budget Group Code</span></td>

There are 38 more td's following this one for a total of 39 columns. They would be hidden one at a time, if any.
Also, if I use a col group and set atomicselection to true, it will run slow (according to MSDN Library). But I don't know what slow is compared to what it is doing right now.
0
 
C_J_LAuthor Commented:
Thanks! I was able to get the getElementById which made it run faster.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.