Solved

Hiding columns load performance

Posted on 2006-06-16
6
338 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now