Solved

Hiding columns load performance

Posted on 2006-06-16
6
339 Views
Last Modified: 2010-08-05
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
  }


}



0
Comment
Question by:C_J_L
  • 4
  • 2
6 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16921535

//Find the column with str as its header

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

Expert Comment

by:0h4crying0utloud
ID: 16921558

I see find the column and hide all it's cells...
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16921577


Instead of finding the str can you just set the colum's id to that string and use getElementByid instead?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 500 total points
ID: 16921705

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
 

Author Comment

by:C_J_L
ID: 16928241
>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
 

Author Comment

by:C_J_L
ID: 16935760
Thanks! I was able to get the getElementById which made it run faster.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question