Question

I have a table in a repeater. The data gets entered into the table and a class is assigned to each row depending on the type of data being loaded. For example:

 <table id="detail-table">
      <tr class="typeA">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeC">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeA">
           <td>Value</td>
      </tr>
 </table>

The table is a collapsed table. typeA is the header, typeB is the child of typeA and typeC is the child of typeB. In the table example typeA has two immediate children and the first child also has a child.

When the user clicks typeA, the two typeB rows appear, and when typeB has children it will also expand to reveal the typeC row. I have an event handler that does this on click.

I need to apply the full detail expansion (typeA to typeC) for an item that has a specific value. I need to trigger the expand event on the parent and all children of that parent when the value of the cell in typeA equals the value received from the query string. I have some code that does this already. However, I feel it is a little bit of a hack. I was wondering if anyone had some suggestions? Here is what I have so far.

 $(function() {
      var tableRows = $('#detail-table').find("tr:gt(0)");
      $(tableRows).each(function(i, val) {
           //ExpandValue is a value in my C# page.
           if ($.trim(val.cells[0].innerText) == '<%= ExpandValue %>'){
                expandRows(i);
           }
      }

      function expandRows(startIndex) {
           // Expand the first row, the typeA class
           // row that matches the value
           $(tableRows[startIndex]).trigger('expand');
           startIndex += 1;
           while($(tableRows[startIndex]).attr("class") != "typeA"){
                $(tableRows[startIndex]).trigger('expand');
                startIndex++;
           }
      }
 });

This finds all of the rows of the table. Then loops through the array of table rows. The condition checks the innerText of the first cell in each row. If the innerText of the cell matches the ExpandValue, the target row has been found. Send the index of this row to the expandRows function. In the expandRows function, expand the row at the startIndex, this is the typeA class row that matched the ExpandValue. Then increment the startIndex by one to point to the next row. The while loop checks the class of each row. Trigger the expand event on each row until the next typeA row is hit. This works and expands each row correctly. But again, I am new to jquery and I feel that there is probably some way to accomplish this in a better way. Any ideas?

Answer 1

You can speed-up your selector and loop at the top of your code:

//instead of using a pseudo-selector, we can use the `slice()` function to get all but the first element returned
var $tableRows = $('#detail-table').find("tr").slice(1);

//this `for` loop will perform a lot faster than the `.each()` loop
for (var i = 0, len = $tableRows.length; i < len; i++) {
    if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
        expandRows(i);
    }
}

Here is a demonstration of how much faster a properly formatted for loop is than using jQuery’s .each(): http://jsperf.com/jquery-each-vs-for-loops/2

Here are some docs for ya:

• .slice(): http://api.jquery.com/slice
• .eq(): http://api.jquery.com/eq
• .text(): http://api.jquery.com/text

Also, you keep wrapping your tableRows variable in jQuery, which is not necessary because it is already a jQuery object from the start.

 $(function() {
      var $tableRows = $('#detail-table').find("tr").slice(1);
      for (var i = 0, len = $tableRows.length; i < len; i++) {
          if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
              expandRows(i);
          }
      }

      function expandRows(startIndex) {
           // Expand the first row, the typeA class
           // row that matches the value
           $tableRows.eq(startIndex).trigger('expand');
           startIndex++;
           while($tableRows.eq(startIndex).attr("class") != "typeA"){
                $tableRows.eq(startIndex).trigger('expand');
                startIndex++;
           }
      }
 });

I’m not sure if this is already doing what you want but on your expandRows function you should probably increment the startIndex by one before doing anything because if the first iteration through the for loop triggers the expandRows() function then it will pass an index of zero which will target the top row (which you exclude from your selector at the start).