Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hiding columns load performance

Posted on 2006-06-16
6
Medium Priority
?
343 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…
Suggested Courses

916 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